あるdiv要素を中央寄せにしようとして、ちょっと悩んだので忘れないようメモします。
<style>
div#a {
width:100%;
text-align:center;
}
div#b {
width:100px;
border:1px solid #333;
}
</style>
<div id="a">
<div id="b">text</div>
</div>
これは、IEだと正しく中央寄せされるのに、Firefoxでは中央寄せされない。
なんでかな～と調べてみたら、FireFoxの場合は子要素の側でも、親要素の余白指定を使うかどうかをmarginで指定してあげないと思ったとおりの表示にならない。
そこで、styleタグの中に以下を追加する。
div#b {
width:100px;
border:1px solid #333;
margin-left:auto;
margin-right:auto;
}
これで期待通り中央寄せ表示される。
“Firefoxで中央寄せが有効にならない問題” への2件のフィードバック
あるHPの制作でdiv,imgの各要素に右寄せを設定しようとして、cssにtext-align:rightを設定しました。当然ながら、FFやSafari、GCでは左寄せとなり、その前の要素がfloat:leftを含んでいる為、要素が重なって表示されてしまいました。後にmargin-left:autoを入れると右寄せになると知り、ローカルで試してみたところ、imgの要素は右寄せになりましたが、divは左寄せのままでした。
ある大きなHPの一部をやや独立したHPとして作っているHPなので、他のCSSの要素が影響している可能性は否定できませんが（どうなっているのか管理権限がなく、わからないので）ローカルのキャッシュの問題なのか、WEBにアップしたら解消するのか悩んでいます。
ずいぶん遅くなってすいません。たぶん、Webにアップしても解決することはないんじゃないかと思います。Firebugなどでどのようなcssが適用されているか確認されてみてはいかがでしょうか。