中央表示を実装

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

ブロックレベル要素の中央表示(センタリング)を行う際に、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で行を左揃えに戻しています。

スポンサードリンク