Mac IE でのセンタリング まとめ(暫定版)

前エントリーにて書いた「Mac IE でのセンタリング」は、固定幅のみに対応したものでした。今回は固定幅に加え、可変幅にも対応したものになります。さらに、コードをちょっとわかりやすくまとめてみました。

可変幅の場合、親ブロックである div#content の幅を%などの相対指定にします。そして、Mac IEのみに margin-left で、div#contentの幅の半分の値をマイナスします。
つまり、div#contentを表示領域の80%の横幅で中央配置にしたい場合、Mac IE以外のブラウザには

body {
    text-align: center; /* IE6互換モード用 */
}

div#content {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    text-align: left; /* IE6互換モード用 */
}

と指定し、Mac IEには、

div#content {
    position: relative;
    left: 50%;
    width: 80%;
    margin-left: -40%; /* 横幅の半分の値 */
}

といったかたちで指定します。

これを、Holly Hackを用いて記述すると、

div#content {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    text-align: left; /* IE6互換モード用 */

    /* これ以降Mac IE 5のみに適用される \*//*/
    position: relative;
    left: 50%;
    margin-left: -40%;
    /* これ以降Mac IE 5以外にも適用される */
}

こういったかたちになります。
前回とは違い、同じルールセット内にHolly Hackを用いて記述していることでよりわかりやすくなったと思います。
では、前回のも含めて以下に暫定版のまとめを記述します。

固定幅(ex. 800px)

body {
    text-align: center;
}

div#content {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    text-align: left;

    /* Mac IE 5のみに適用 \*//*/
    position: relative;
    left: 50%;
    margin-left: -400px;
    /**/
}

可変幅(ex. 80%)

body {
    text-align: center;
}

div#content {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    text-align: left;

    /* Mac IE 5のみに適用 \*//*/
    position: relative;
    left: 50%;
    margin-left: -40%;
    /**/
}

いかがでしょうか。
なお、横幅が%指定の可変幅の場合は以下の記述でもセンタリングできます。

可変幅パターン2(ex. 80%)

div#content {
    overflow: hidden;
    width: 80%;
    margin: 0 10%;
}

上記の場合、左右のmarginの値を、100%から横幅を引いたものの半分にします。つまり横幅が80%だった場合、あまりは20%となるわけですので、左右に10%ずつ指定することとなります。この場合は、Mac IEでも同様ですので、Holly Hackを使わずに記述することができます。

既存のブログが、カラム部分だけ左寄せになってしまう！ってな方は是非お試しくださいー。