全体のレイアウト：中央揃えについて

Question

画面の全体のレイアウトを中央にそろえたいと思い、「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">


</style>
<title></title>
</head>
<body>
<div class="Zen">
<div class="Ku1_0" id="Ky"></div>
</div>
</body>
</html>

Muller3 · Accepted Answer

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/b035.html
というバグもあり、
body { text-align: center }
は、このバグを利用している形です。

文字コードにutf-8を用いれば、xml宣言は省略可能なので、このバグも気にしなくてよくなるのですが…。

「ie6　中央揃え」で検索してみるといいかもしれません。
あとは、良書を購入して勉強されるといいと思います。

Nine-nine · Answer

margin:0 autoはブロック要素に効く text-align:centerはインライン要素に効く ieも含めｃｓｓ文法解釈を完璧に正しく行うブラウザはない。その齟齬を人によりこれバグ・仕様という。お奨めの方法は、正しい文法を学び、正しい記述をしたうえで、バグっているブラウザに向けて、補正するやり方です。その意味で、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でできることはhxでもtableでもulでもできます。正しい構造の為のタグを利用し、それに当てはまるものが無い時に、divを使ってください。 { margin-left: auto; margin-right: auto } この指定はどんなに考えても、矛盾していますので、このような記述をしているソースは全体に信用できません。参考にするなら避けるべきサイトです。参考にしてはいけない記述がわかるようになれば上達がはやいのですが、なんか知らんけどできたのうちは、無理ですね。

NymphLuna · Answer

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;
が正しい記述方法だと思うのですが。

kazumero · Answer

センタリングに関しては、参考URLを参考にしてみてください。

どのブラウザでも同じようにセンタリングするには、CSSで色々いじる必要があります。

参考URL：http://www.mozilla.gr.jp/standards/webtips0004.html

全体のレイアウト：中央揃えについて

IEのバグです。

margin:0 autoはブロック要素に効く

IE7についてのバグはNo.1さんが書かれている通りだと思います。

センタリングに関しては、参考URLを参考にしてみてください。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング