![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。
ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。
ブラウザで比較してみると、
■IE7
body { text-align: center }で、中央揃え
div.Zen { margin-left: auto; margin-right: auto }では中央にならない
■Opera9.25
body { text-align: center }では、中央にならない
div.Zen { margin-left: auto; margin-right: auto }で、中央揃え
■NetScape7.1
body { text-align: center }では、中央にならない
div.Zen { margin-left: auto; margin-right: auto }で、中央揃え
■Firefox2
body { text-align: center }では、中央にならない
div.Zen { margin-left: auto; margin-right: auto }で、中央揃え
と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか?
回答よろしくお願いします。
<?xml version="1.0" encoding="Shift-JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<style type="text/css">
<!--
div.Zen { width: 900px; margin-left: auto; margin-right: auto }
body { text-align: center }
#Ky { float: left }
div.Ku1_0 { width: 900px; height: 150px;
background-color: aqua
}
-->
</style>
<title></title>
</head>
<body>
<div class="Zen">
<div class="Ku1_0" id="Ky"></div>
</div>
</body>
</html>
No.1ベストアンサー
- 回答日時:
IEのバグです。
HTMLで、DOCTYPE宣言の前にxml宣言が書かれていますよね。
通常URL(http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd)付きのDOCTYPE宣言は、「WEB標準に準拠した文書なので、標準準拠モードで読んでね」という意味です。(DOCTYPEスイッチという)
標準準拠モードで読めばIEでもautoの指定は効きます。
しかしIEでは、doctype宣言の前に何か(xml宣言に限らずコメントでも)が書かれていると、「互換モード」で読んでしまうバグがあるのです。ですので、autoの指定が効かなくなります。
更に、
「text-alignプロパティの指定がボックスの配置に影響を与える」
http://cssbug.at.infoseek.co.jp/detail/winie/b03 …
というバグもあり、
body { text-align: center }
は、このバグを利用している形です。
文字コードにutf-8を用いれば、xml宣言は省略可能なので、このバグも気にしなくてよくなるのですが…。
「ie6 中央揃え」で検索してみるといいかもしれません。
あとは、良書を購入して勉強されるといいと思います。
なるほど。IEのバグなんですか。IE7でも続いているんですね。
文字コードをUTF-8にして、XML宣言を省略すればバグがなくなるわけですね。
ありがとうございました。
No.4
- 回答日時:
margin:0 autoはブロック要素に効く
text-align:centerはインライン要素に効く
ieも含めcss文法解釈を完璧に正しく行うブラウザはない。その齟齬を人によりこれバグ・仕様という。
お奨めの方法は、正しい文法を学び、正しい記述をしたうえで、バグっているブラウザに向けて、補正するやり方です。その意味で、IEを基準にサイトを作ると、他のブラウザでは崩れることが多いです。IEは他にもバグだらけなので……。それと標準モードと過去互換モードの選択、違いを認識することは、統一した表現を行う上で欠かすことができません。
今の場合、私なら
-----
body{text-align:center;}/*これはIEのバグの為*/
div{width:304px;margin:0 auto;}/*これは全体を囲む*/
div div{text-align:left;float:left;width:150px;border:red 1px solid;}/*これは個々の指定*/
<div><div>本文</div><div>本文</div></div>
------
な感じですね。エリアをわかりやすくするために罫で囲いました。divは便宜上ですので、本来のブロック要素を使ってくださいね。divばかりの記述は明らかに間違いです。divでできることはhxでもtableでもulでもできます。正しい構造の為のタグを利用し、それに当てはまるものが無い時に、divを使ってください。
{ margin-left: auto; margin-right: auto }
この指定はどんなに考えても、矛盾していますので、このような記述をしているソースは全体に信用できません。参考にするなら避けるべきサイトです。参考にしてはいけない記述がわかるようになれば上達がはやいのですが、なんか知らんけどできたのうちは、無理ですね。
なるほど。
{ margin-left: auto; margin-right: auto }
という指定は記述しない方がいいんですね。divの使い方にも注意します。
ありがとうございました。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_03.png?5a7ff87)
No.3
- 回答日時:
IE7についてのバグはNo.1さんが書かれている通りだと思います。
質問者さんが書かれている
div.Zen { margin-left: auto; margin-right: auto }
ですが、CSSで「float: left」を使用している2カラムや3カラムのサイトでは
「margin-left: auto; margin-right: auto」はほとんど見かけないように思います。
一般的に「margin:0 auto;」を使われることが多いようです。
div.Zen { width: 900px; margin:0 auto;}
#Ky { float: left; }
と書かれることで、IEでもFirefoxでも表示は可能です。(Operaもおそらく可能)
あと気になっているのですがCSS記述の最後に「;」を書かれないのは何故でしょうか?
div.Zen { width: 900px; margin-left: auto; margin-right: auto; }
body { text-align: center; }
#Ky { float: left; }
div.Ku1_0 { width: 900px; height: 150px; }
background-color: aqua;
が正しい記述方法だと思うのですが。
なるほど。「margin:0 auto;」の方を使った方がいいんですね。
CSS記述の最後に「;」を書くのが、正しい記述法なんですか。これから気をつけたいと思います。
ありがとうございました。
No.2
- 回答日時:
センタリングに関しては、参考URLを参考にしてみてください。
どのブラウザでも同じようにセンタリングするには、CSSで色々いじる必要があります。
参考URL:http://www.mozilla.gr.jp/standards/webtips0004.h …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
テキストボックスの様に文字の...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
インラインフレームの表示位置...
-
IEでDIV要素のセンタリング...
-
文字を左上に配置したい。
-
HTMLフォームのSELECTの幅を一...
-
IE6にしたらHTMLの表レイアウト...
-
テキストボックスの文字を右揃...
-
docomo携帯サイトのボックスの...
-
インラインフレームのボーダー...
-
ピクセル表示をパーセント表示...
-
なぜ左に寄っているの?
-
文字を揃えたいのです。
-
ホームページ作成初心者
-
「全体のレイアウト:中央揃え...
-
HTMLでテキストエリアをセンタ...
-
1つのサイトに2つの<ol>を使いたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報