ところが、FirefoxなどのCSSに厳格なブラウザでは、text-align:centerは<div>などのブロック要素を中央配置することができない。
これについての詳細は、text-align: center; not working in Firefox:(英語)を参照されたい。
上のページを要約すると、Firefoxでは
body { text-align: -moz-center; }
を使えばいいよ、である。
これで、Firefoxではめでたく<div>(たとえば600pxで固定されたもの)はちゃんとセンタリングされる。
しかし、これだと、Firefoxでしか有効でないため、IE用の記述も必要になる。
これに対しては、CSSハックを使った方法が紹介されていた。
body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
この方法では、FirefoxとIE5.5, 6, 7に対応できることが確認された。
でも、これだと、Google chromeやIE8などの、最近のブラウザではちゃんと中央添えされないことがわかった。
うーん、困った。
もっと、読み進めたら、今度はtext-alignを使わない方法が紹介されていた。
これがまさに目から鱗。
#div_container {
position: absolute;
left: 50%;
height: 100%;
width: 1000px;
margin-left: -500px; /* MUST be half the width */
}
いったん、ページの真ん中に<div>の左端を合わせて、次に、幅の半分だけ左に戻るというやり方。
この方法だと、ページの幅が未知でもうまく、センタリングされる。
なんか、ごちゃごちゃしているので図解してみた。
↓拡大できます。
この方法は、FirefoxはもちろんIE 5.5, 6, 7, 8、Google Chromeでもうまく使えた。
<div>の幅がpx値などで固定されていることが前提条件だけど、これで解決されるデザインは多いと思う。
関連書籍
 
XHTML/HTML+CSSスーパーレシピブック
|
 
HTML5＆CSS3辞典
|
 
XHTML+CSS プロが教える“本当の使い方”
|
