21 July 2008

CSSでページ中央配置(センタリング)

XHTMLでCSSを用いて、divブロックをページ中央配置(センタリング)する方法のメモ

Firefox 2以降、IE7でうまく行く方法でも…

IE6でうまく行かない

body {
margin: 0 auto;
width: 800px;
}

IE6後方互換ではうまく行かない

body {
}

div#container {
margin: 0 auto;
width: 800px;
}

Google検索すれば、次のようなアイデアも…

ブラウザのウインドウを小さくすると…

body {
}

div#container {
width: 800px;
left: 50%;
margin-left: -400px;
}

結論

・body要素ではなく、divブロックでセンタリング及び幅指定を行う
・IE6後方互換モードにさせないため、htmlファイルの先頭に <?xml … を記述しない
  記述した場合は、センタリングが効かない