小粋空間  -  a cheap joke and a play on words site

CSSでブロックレベル要素をセンタリングする

インライン要素をセンタリングする場合は、その要素のCSSで

text-align: center;

という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、

<div id="test">[ブロックレベル要素]</div>

をセンタリングする場合は、CSSに下記のような設定を行います。

#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1

したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、

<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>

追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2

#wrap {
    text-align: center;
}
#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。

逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って

#test {
    text-align: center;
}

というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。

---

*1：「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。

*2：参考 - Web標準普及プロジェクト：ブロックレベル要素をセンタリングする方法