div要素をセンタリング

質問

<div style="width:300px; text-align:center; border:1px dashed red;">
この文字は中寄せ
<div style="width:200px; border:1px dashed green;">
このボックスも中寄せ
</div>
</div>

このようなHTMLを表示すると、
ＩＥでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。
これを、中央に寄せる方法はないでしょうか？
（表示が遅くなるのを防ぐために、テーブルは使いたくありません）

回答No.1

steel_gray · ベストアンサー

ネスケやオペラの方が正し動作で、text-align:centerでブロックがセンタリングされてしまうのはIEの有名なバグの一つです。
参考urlの内容を参考に対処してみてください。

参考URL：

http://www.mozilla.gr.jp/standards/webtips0004.html

お礼

なるほど、左右のマージンをautoにするのですね。
うまくいきました。ありがとうございました！

回答No.2

mat-21

<div style="width:300px; text-align:center; border:1px dashed red;">
この文字は中寄せ
<div style="width:200px; margin-left:50px; margin-right:50px; border:1px dashed green;">
このボックスも中寄せ
</div>
</div>

上記のように「300px-200px」の差分の100pxを左右に割り振って、左右50pxずつマージンを空ければ良いかと思います。