miniturbo::Blog

固定幅のフローティングレイアウトをしていて、ブロックレベル要素をセンターに配置したい時、通常なら

div#content {
    margin: 0 auto;
}

てな感じでセンタリングすると思います。

しかし、Mac IEではある条件のときにmargin: auto;が効かなくなります。今回は、それを解決するお話。

ある条件とは、フロートで高さを算出させるために overflow: hidden; を使用した場合です。この時、そのブロック要素ではmarginのautoが効かなくなってしまいます。(marginプロパティで値を一括指定すると無視される(4.1/5.0) - CSSバグ辞典)

つまり…

<div id="content">
    <div id="menu">メニュー的なもの</div>
    <div id="main">メイン的なもの</div>
</div>

こんな2カラムレイアウトをしたい時

div#content {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
}

こんな感じで、overflow: hidden;を用いて高さを出すとMac IEではmarginのautoが効かなくなり、div#contentは左に寄ってしまいます。

フロートレイアウト時の高さを出す方法はいくつかあるのですが、Mac IEでは今のところ、このoverflow: hidden; を用いた方法がベターだと思われます。

そこで、Mac IEではmargin: auto;以外の方法でセンタリングをすることになります。

具体的には、以下の方法をとります。

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

ブロックレベル要素に、ポジションで左から50%…つまり右からも50%なので、真中から配置するようにします。そしてネガティブマージンを用い、その要素の半分をマイナスしています。こうすることによってMac IEでoverflowを使用したときでも、センタリングをすることができます。

さらにMac IE以外ではmarginを使用するため、Holly Hackを用いてMac IEのみ違うプロパティをあてます。

まとめると以下のようになります。

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

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

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

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

2006.12.8 追記

Mac IE用に指定していたmarginプロパティに誤りがありました。

正しくは「margin-left: -400px;」となります。

THX. のえるさん

可変幅にも対応したものを別途エントリーしました。ご覧ください。

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