テキストや画像などの要素を、ボックスの縦中央に揃える方法がこちらで紹介されています。
使用の条件としては
・ボックスが2つ以上横並びになっている
・そのボックスの width が決まっている
こんな感じになっていますが、CSSだけで（しかも短いコードで）実現できるのでとても使いやすいです。
対応ブラウザは以下の通り。
・Firefox 1, 2
・Netscape 6, 7.1
・Safari 2, 3
・Opera 9.2
・IE 5.01, 5.5, 6, 7
■使用方法
次のような複数のボックスを囲んだ div に対してクラスを当てます。
--------------------------------------------------------------
【HTML】
<div class="sample">
<div>
aaaa
</div>
<div>
bbbb
</div>
</div>
--------------------------------------------------------------
【CSS】
div.sample div{
display:table-cell;
width:100px;
vertical-align:middle;
}
* html div.sample div{/* IE 6 */
display:inline;
zoom:1;
}
*:first-child+html div.sample div{/* IE 7 */
display:inline;
zoom:1;
}
--------------------------------------------------------------
下はIE用のハックとなっています。
コメントする