2

我正在尝试显示文本“我是来自英国伦敦的 iOS 工程师和 Web 开发人员”，该文本在divid 为“伦敦”的情况下集中对齐。但是，我正在努力寻找这样做的好方法。水平对齐很容易，因为我只需要设置text-align'london' 的属性div。但是，当尝试垂直对齐时，我无法设置width和height属性，这意味着我不能margin: 0 auto;用来垂直对齐文本，因为我正在使用span元素。

请你能告诉我完成这个的最佳方法吗？

这是我目前拥有的 JSFiddle：http: //jsfiddle.net/5aX7p/。

4

3 回答 3

5

您可以执行以下操作：

HTML：

<div class="outer">
    <span class="inner">This is vertically centered.</span>
</div>

CSS：

.outer {
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}

我在这里改变了你的小提琴：

http://jsfiddle.net/5aX7p/5/

请注意，使用 CSS 表格（恕我直言）比更改 line-height 或 padding 或 margin 或其他更好，因为它始终垂直居中内部跨度，即使它换行到多行。使用其他解决方案，如果内容的大小发生变化，您必须调整 line-height 或 padding 或 margin 的值。

于 2013-02-15T23:21:35.537 回答
0

如果您的#london分区总是 200px 高，您可以更改height: 200px为line-height: 200px，它将使行中的文本垂直居中。

见这里：http: //jsfiddle.net/5BDcr/

于 2013-02-15T23:20:43.457 回答
0

这是一个中心对齐的版本（取自您的小提琴）：

<div id="london">
            <span class="light" style="display: inline-block; vertical-align: middle; line-height: 1.2;">I’m an 
                <span class="heavy">iOS Engineer &amp; Web Developer</span>
                <span class="light"> from London, UK</span>
            </span>
</div>

将此添加到#london 的 CSS 中：

line-height: 200px;
于 2013-02-15T23:20:57.910 回答