html - vertical-align の使い方: middle

Question

ライブ: http://jsfiddle.net/8hAv3/

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}
#sub {
    width: 100%;
    height: 100%;
    background-color: blue;
    vertical-align: middle;
}

<div id="main">
    <div id="sub">TEXT</div>
</div>

この例で垂直方向の位置合わせが機能しないのはなぜですか? どうすれば作れますか？マージン、パディング、高さをpxで設定したくありません。これは可能ですか？

Answer 1

これはうまくいくはずです：

#main {
    width: 100px;
    height: 100px;
    background-color: red;
    display: table;
}
#sub {
    display: table-cell;
    height: 100%;
    width: 100%;
    background-color: blue;
    vertical-align: middle;
}

http://jsfiddle.net/8hAv3/2/

Answer 2

要素 #sub に行の高さを指定する必要があります。そうしないと、ブラウザは垂直方向に配置する高さがわかりません。

Answer 3

divに a を与えるだけline-heightです。

 #main {
    width: 100px;
    height: 100px;
    background-color: red;
}
#sub {
    width: 100%;
    height: 100%;
    background-color: blue;
    line-height:100px;
}

フィドル

このソリューションはdisplay:tableanddisplay:table-cellを使用display:tableせずdisplay:table-cell、ブラウザーに適していないため、一部の古いブラウザーはサポートしていません

Answer 4

display:tableメインコンテナとdisplay:table-cell子コンテナで使用する必要があります。ここに示す: http://jsfiddle.net/8hAv3/1/

Answer 5

を使用する必要があります

display:table-row; 
display:table-cell; or 
display:table;

vertical-align スタイルとともに、どの正確な表示値が必要かはわかりませんが、そのうちの 1 つである必要がありtableます。

Answer 6

固定高さのボックスでテキストを垂直方向に中央揃えにしたい場合line-height:100pxは、それを行うために使用します