在div中垂直居中文本

Question

我正在尝试显示文本"我是来自英国伦敦的iOS工程师和网络开发人员",并div以"伦敦"ID为中心.但是,我正在努力找到一个好方法.水平对齐很容易,因为我只需要设置text-align'伦敦' 的属性div.但是,当尝试垂直对齐时,我无法设置width和height属性意味着我无法使用margin: 0 auto;垂直对齐文本,因为我正在使用span元素.

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

这是一个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),因为它总是垂直居中内跨,即使它包裹在多行上.对于其他解决方案,如果内容大小发生变化,则必须调整行高或填充或边距的值.