suin.io

CSSのtext-align:center;は<div>には通用しない

suin2009年3月20日

body直下の<div>を幅固定でセンタリングするなんていう要望は、かなりあると思う。

ところが、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値などで固定されていることが前提条件だけど、これで解決されるデザインは多いと思う。

RELATED POSTS