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 … を記述しない
  記述した場合は、センタリングが効かない