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を指定してテキストの寄せを戻しておく。
ってことみたい？
