- ベストアンサー
autoを使ってもブラウザの中央に寄らない
先週からHTMLを学び始めた初心者です。外部スタイルシートを使ってHPを作成しています。同じ様な過去の質問を見たのですがどうも分かりません。申し訳ありませんが教えて下さい。 ベースボックスでautoを使ってブラウザの中央に位置させようとしても、左に寄ってしまいます。何故でしょうか？ cssには以下のように書いています。 body{ line-height:140%; font-size:12px; color:#000000; margin:0px; } .base{ width:680px; margin:0px auto 0px auto; background:url(img/base.gif); } .header{ height:93px; background:url(img/header.gif); background-repeat:no-repeat; } .left{ width:205px; float:left; background:url(img/haikei.gif); margin:0px 0px 0px 2px; } .center{ width:430px; padding:0px 15px 0px 5px; float:left; } .footer{ clear:left; height:65px; background:url(img/haikei.gif); background-repeat:no-repeat; } HTMLは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>123株式会社</TITLE> <LINK rel="stylesheet" HREF="1111.css" type="text/css"> </HEAD> <BODY> <DIV CLASS="base"> <DIV CLASS="header"></DIV> <DIV CLASS="left"></DIV> <DIV CLASS="center"></DIV> <DIV CLASS="footer"></DIV> </DIV> </BODY> </HTML>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
一行目の文書型宣言がよろしくないみたいです。 例示して頂いたものに代えて、下記で試したところIE6でも正しくセンタリングされました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ◆原因 インターネットエクスプローラーのちょっと前のバージョンでは、marginのautoは対応していないのだそうです。 で、インターネットエクスプローラーの最新版では、昔のバージョンで描画するモード(後方互換モード)とW3C標準のモードがあるんですけど、この切り替えは一行目で判断しています。 今回の場合、文書型宣言にDTDのURLが抜けていたので、IEが互換モードで描画したのではないかと思います。 ※DTD：HTMLをどう解釈するべきか定義してある文書
その他の回答 (1)
- koutarou504
- ベストアンサー率44% (182/407)
何故？ ＩＥのバグです・・・。 とりあえず、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> と DOCTYPE を互換モードから標準モードに変えれば ＩＥ６ではバグ改良済みだそうですが。 でそのまま互換モードとする必要があったり （ＩＥ拡張機能を使いたい場合など） ＩＥの古いバージョンへの配慮を考えると 大外に <div style="text-align:center;">～</div> で囲ってあげる事で中央寄せは対応できます。 （バグをそのまま利用） 一応、この様な事が他の類似の質問に対する回答で書かれていて それを今回の提示された物に対して検証，例示したのが 今回の回答です。 つまり、ブラウザにはバグがあり、 しかしそのバグがそのまま使われているので 複数の仕様（文法）を意識して記述するしかないという事です。
お礼
koutarou504様、ご丁寧なご回答をいただきありがとうございました。今までの類似質問・回答を読んでもよく分からなかったことが理解できました。面白くなってきたのでもっと勉強しようと思います。どうもありがとう。
お礼
pingu98様、早速のご回答感謝しております。DTDのURLを書き込みましたところ無事にセンタリングできました。ありがとうございました！ただの英文字の羅列に見えたものが意味のあるものとして頭に入ってきました。