テキストをボックスの縦中央に揃える

| コメント(0)
テキストや画像などの要素を、ボックスの縦中央に揃える方法がこちらで紹介されています。


使用の条件としては
・ボックスが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用のハックとなっています。

コメントする

このブログ記事について

このページは、gravity-worksが2011年12月20日 20:37に書いたブログ記事です。

ひとつ前のブログ記事は「windowsでも綺麗に表示できる明朝」です。

次のブログ記事は「ページを右クリック禁止にする」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。