- ベストアンサー
div記述方法について
よろしくお願いします。 cssに以下のように記述をしました。 div#border {width: 800px; margin-left: auto; margin-right: auto; border: 1px solid #000000; padding: 10px 10px 10px 20px; background-color: #ffffff; } 出来た枠の中に文字や画像を入れていっているのですが、その文字や画像は、それぞれ左寄せにしたり、画像は中央揃えにしたりしています それは、問題無いと思うのですがFire Foxで見ると外側に作成した枠そのものが、中央に寄って表示されるのですがIEで見ると枠そのものが 左に寄ってしまいます。 Fire Foxでの表示が正しいようですが、IEでも枠が中央に表示させる事は出来ないのでしょうか？ 私はdiv#borderにtext-align: centerを記述したところ枠の中の文字から左寄せに表示したい画像まで中央に寄ってしまいました。これでは私の考えている内容では無いためtext-align: centerの記述は削除しました。 初心者では御座いますがご指導の程よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そうですね。古いブラウザでは、左右の「margin」を「auto」にしても、そのDIVブロックはセンターになりませんね。 よって、そのDIV以外のブロックのレイアウトに影響するかもしれませんが、 body { text-align:center; } で指定するか、 そのセンタリングしたいDIVの、親DIVを設け、予めCSS指定したクラスを割り当てる方法はいかがでしょうか？ .alC { text-align:center; } #border { width: 800px; margin: 0px auto; border: 1px solid #000000; padding: 10px 10px 10px 20px; background-color: #ffffff; } <div class="alC"> <div id="border">これが横800pxのブロック</div> </div>
その他の回答 (1)
- mtaka2
- ベストアンサー率73% (867/1179)
HTMLのDOCTYPEは何にしていますか? 古いIEとの互換モードになっている場合、 margin-leftやmargin-rightで auto の指定がききません。 HTML 4.01 Strict 以上にしてみたら改善されると思います。 http://web8341.info/advanced/dtd.htm
補足
mtaka2様ありがとう御座いました。 DOCTYPEは以下のようになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML 4.01 Strict 以上にしてみたら改善されると思います。 上記のように頂きましたが、既にソースもXHTMLの記述をしており DOUTYPEの表記をHTML 4.01 Strictにするのは聊か厳しいような気がいたします。 よろしければ再度ご指導の程よろしくお願い致します。