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>