CSSで中央表示を実装する【css tips】

このエントリーをはてなブックマークに追加

ブロックレベル要素の中央表示(センタリング)を行う際に、text-alignプロパティにcenterを指定して実装するのは間違いである。
なぜならtext-alignプロパティは、インライン要素の位置揃えを指定するためのものだからです。

CSSでブロックレベル要素の中央表示を行う際には、ブロックレベル要素に対して幅を指定した上で、左右のmarginに対してautoを指定すればよい。

CSSソース

div{
 margin:0 auto;
 width:200px;
}

サンプル

Windows版IEに対応する

windows版IE6の過去互換モードや、IE5以下のブラウザは上記のやり方では、ブロックレベル要素の中央表示を行うことはできません。

windows版IE6の過去互換モードや、IE5以下のブラウザでは以下のような方法で中央表示を実装します。

body{
 text-algin:center;
}

div{
 text-algin:left;
 margin:0 auto;
 width:200px;
}

サンプル

これはブロックレベル要素にtext-alginで位置揃えができるというIEのバグを逆手に取った対処方法です。
ただ、内包するコンテンツまでtext-alginで中央表示してしまう為、中央表示するブロックレベル要素に対してはtext-algin:leftで行を左揃えに戻しています。

Powered by CSS TIPS

関連リンク

CSSで垂直中央を実装する【css tips】

スポンサードリンク

«CSSで垂直中央を実装する【css tips】 | メイン | 画面の下部にフッターを表示する»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1340
コメントを投稿