Question

我正在尝试显示文本“我是来自英国伦敦的iOS工程师和网络开发人员”，在div中心对齐，ID为'london'。但是，我正在努力找到一个好方法。水平对齐很简单，因为我只需要设置'london'text-align的{{1}}属性。但是，在尝试垂直对齐时，我无法设置div和width属性，这意味着我无法使用height垂直对齐文本，因为我正在使用{{1} } elements。

请告诉我最好的方法来实现这个目标吗？

这是一个JSFiddle，我现在拥有的东西：http://jsfiddle.net/5aX7p/。

Answer 1

您可以执行以下操作：

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表格比改变行高或填充或边距或其他更好（IMHO），因为它总是垂直居中内部跨度，即使它包裹在多行上。对于其他解决方案，如果内容大小发生变化，您必须调整行高或填充或边距的值。

Answer 2

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

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

Answer 3

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

<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;

在div中垂直居中文本

3 个答案: