メモ:CSS3のdisplay:boxで中央寄せ

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

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

HTMLはこんなの。
[html]

[/html]
CSSはこんな感じ。
[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;
}
[/css]

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

[css]
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;
}
[/css]

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

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

ってことみたい?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*