在 div 中垂直居中文本答案

【问题标题】：Vertically centre text in a div在 div 中垂直居中文本
【发布时间】：2013-02-01 00:47:33
【问题描述】：

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

请您告诉我完成此任务的最佳方法吗？

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

【问题讨论】：

标签： css html alignment text-alignment

【解决方案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 表格（恕我直言）比更改 line-height 或 padding 或 margin 或其他任何东西更好，因为它始终垂直居中内部跨度，即使它换行成多行。使用其他解决方案，如果内容的大小发生变化，您必须调整 line-height 或 padding 或 margin 的值。

【讨论】：

实际上应该是vertical-align: middle，而不是vertical-align: center。 ;)
糟糕，谢谢！编辑考虑到这一点。我的小提琴是对的，这算吗？ :)

【解决方案2】：

如果您的 #london 分区始终为 200 像素高，您只需将 height: 200px 更改为 line-height: 200px，它将使行中的文本垂直居中。

请看这里：http://jsfiddle.net/5BDcr/

【讨论】：

【解决方案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;

【讨论】：