css - 垂直居中文本

Question

如何将一些简单的文本垂直居中正常<div>？我有这样的标记：

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

它不适用于 Firefox 或 Internet Explorer。为什么不？

Answer 1

不是vertical-align这样。你可能想要line-height：

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

这是一个演示。

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>