IE ではdisplay:table-cellが効かない

実は display:table-cell がインライン要素にしか効かないと、貧弱な情報網によりつい先日知りました。
だから div や p などの要素で囲む場合は、一番外側の要素に display:table が必要なのですね。

複数行の文章を、縦中央方向にセンタリングしたい時は

<div class="box">
<ul>
<li>苦難は</li>
<li>幸福への</li>
<li>羅針盤</li>
</ul>
</div>

このようなhtmlの場合

div.box { display: table; }
div.box ul { display: table-cell; vertical-align: middle; }

cssは上記でできるのですが
例によってIEでは効きません。

しかもIE9でも効きません。
cssの「どのブラウザからこのスタイルシートが使える」という指標は、完全ではないようです。

そういう場合、IEハックの出番です。

div.box { display: table; }
    * html div.box { position: relative; }  
    *+html div.box { position: relative; }

div.box ul { display: table-cell; vertical-align: middle; }
    * html div.box ul { position: absolute; top: 50%; }  
    *+html div.box ul { position: absolute; top: 50%; }  

    * html div.box ul li { position: relative; top: -50%; }  
    *+html div.box ul li { position: relative; top: -50%; }  

こちらを参考……というか丸パクリさせていただきました。

tableを使わずdivで縦位置を指定(Scuderia Web様)

ネガティブマージンがIEでは効かないことから、position のマイナス値も一瞬戸惑いましたが、問題はないようです。
ホッとしたのですが、考えてみれば、問題あるはずがないかもしれませんね。 マイナス効かなかったら position の意味があんまりないかも。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ