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