css - IE7とIE6で要素を垂直方向に中央揃えする方法は?

Question

高さが固定されていない div 要素があります。高さに関係なく、親要素内で垂直方向に中央揃えにしたいと考えています。私はdisplay: table-cell最新のブラウザーでこの手法を使用していますが、この手法は IE7 以下では機能しないようです。純粋な CSS を使用して、IE7 以下でこの垂直方向に中央揃えの効果を実現する方法はありますか? 前もって感謝します。

Answer 1

コンテナのheight値をそのline-heightプロパティとdisplay:inline-block中央の要素に設定できます。

HTML:

<div id="container">
    <span>content</span>
</div>

CSS:

#container {
    display: table-cell; vertical-align:middle;
    border:1px solid red;
    height:300px;
    background-color:green;
    width:400px;
    text-align:center;
    line-height:300px; /* Same as height */
}
#container>span{
    background-color:lightblue;
    height:50px;
    width:100px;
    line-height:normal;
    display:inline-block; 
    vertical-align:middle;
}

こちらをご覧ください：http://jsfiddle.net/9TE5t/4/

display:inline-blockただし、IE 7 以前では、既定のブロック要素 ( など<div>) を設定すると、 のように動作することに注意してくださいdisplay:block。

次に、既定のインライン要素 ( など) を使用するか、ブラウザーが IE7 以前の場合は<span>IE の条件付きコメントとセットdisplay:inline( のように動作します) を使用できます。display:inline-block