我流天性 がらくた屋

HTML5+CSS3に手をつけててハマったのでメモ。

3カラムのボックスを横並びにしようとして、CSS3の display:boxを使ってみたら親要素を中央寄せできなかった。
環境はMac / Firefox 3.6.3。
ちなみにSafari4では大丈夫でした。

HTMLはこんなの。

<div id="container">
<section>左</section>
<section>中</section>
<section>右</section>
</div>

CSSはこんな感じ。

#container {
display :box;
margin: 0 auto; /* ←これが効かない */
width: 900px;
}

#container section {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
}

こう書いたらうまく 3カラムの真ん中寄せができました。

body{
text-align:center; /* ←Firefox用 */
}
#container {
display :box;
margin: 0 auto; /* ←Safari用  */
width: 900px;
text-align:left; /* ←Firefoxのテキストを左寄せに戻す */
}

#container section {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
}

解決策は、親要素の親要素(ここではbody)にtext-align:center を指定するだけだった。
まとめると、

• display :box を指定した要素は Firefoxでは寄せに関しては、inline-box的な振る舞いになるっぽい？
• display :box を指定した要素の親要素に text-aling:center を指定すれば真ん中寄せになる
• display :box で text-aling:leftを指定してテキストの寄せを戻しておく。

ってことみたい？

タグ: CSS3, Firefox, HTML5, MAC, メモ