垂直居中文字

Question

如何在普通<div>中垂直居中一些简单文字？我有这样的标记：

<div style="height:200px;">
   <span style="display:inline; vertical-align:middle;">ABOUT</span>
<div>

在Firefox或Internet Explorer下无效。为什么不呢？

Answer 1

That's not what vertical-align does.您可能需要line-height：

<div>
    <span style="line-height: 200px;">ABOUT</span>
</div>

Here's a demo.

Answer 2

我发现使用间距元素是最可靠的方法，可以使您知道（图像，文本）高度的任何元素居中。这会将元素置于任何高度的容器中。

的 CSS： 的

#outer {
    background: grey;
    height: 200px; /* any height */
}

#outer > div {
    height: 50%;
    margin-bottom: -6px;
}

#outer span {
    font-size: 12px;
}

的 HTML： 的

<div id="outer">
    <div></div>
    <span>Example</span>
</div>