- 締切済み
Firefoxで真ん中に表示されない
こんにちはCSSでの疑問なんですが下記のように コードを書いて、CSSで"H"のボックスを"F"のボックスの真ん中に 表示されるようにしたいのですが、IE6では表示されるのですが Firefox2では左右は真ん中にあるのですが、上下が動きません。 ご教授おねがいします。 <body> <div id="F"> <div id="H"> </div> </div> </body> #F { background: #000000; height: 200px; width: 200px; } #H { background: #33CCCC; height: 100px; width: 100px; margin: 50px auto 0px; }
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- rainbowsix
- ベストアンサー率85% (6/7)
確か、IE以外のモダンブラウザでは、仕様として入れ子の子要素に上マージンを設定すると、それをあたかも親要素の上マージンのように扱ってしまうような現象があったように思います。これは、親要素と子要素の間でマージンの”相殺”をした結果みたいです。 もし”F”要素に何も入らないのでしたら、以下のようにCSSを組むのはいかがでしょう。 #F { background: #000000; height: 100px; width: 100px; padding:50px; } #H { background: #33CCCC; height: 100px; width: 100px; margin: 0px auto 0px; } また、用途によるとは思いますが、以下のような記述でも同じ見た目を実現できます。 <body> <div id="H"> </div> </body> #H { background: #33CCCC; height: 100px; width: 100px; border:50px solid #000; } 黒枠をボーダーでやってしまう、というわけです。ただの枠として黒を使用するのであれば、こちらのほうがコードがすっきりしますね。 参考になればと思います。
お礼
回答ありがとうございます。 ほぉ～マージンの相殺ですか・・・ 教えて頂いたサイトを参考に私は padding 1px でやりますね。 おかげ様で又CSSの知識がつきました。 感謝感謝です。