IE でのブロックレベル要素のセンタリングについて、こちら
http://www.mozilla.gr.jp/standards/webtips0004.html
で DIVを二重に重ねる方法について述べられていますが、IE 7 でも単に margin-right/left を auto にするだけではセンタリングされないのでしょうか。
文書型宣言によってはセンタリングされるとか、単一の DIV だけでもセンタリングが可能になっているようでしたら、その実例をサンプルで示していただけると大変ありがたいです。
ちなみに手元に IE 7Beta がインストールされている PC があるので、そちらでかんたんに確認したところ、やはり DIV を2つ重ねないとセンタリングされないようでした。
私自身IE7を試したことがないですが、一応IE7 beta2ではちゃんと対応しているようです。(以下ソースはGoogleのキャッシュです・・・一番わかりやすかったけどページ自体はもう閉鎖してました)
http://72.14.203.104/search?q=cache:NFSlY9dBb9kJ:ksnk.blog7.fc2....
ただ、まだまだIE6が現役ですのでシェアの多いものにはちゃんと対応した方が良いかと思います。
IE6 でも標準モードだと margin-left:auto;marginright:auto でセンタリングできるようです。
http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm
がよくまとまっています。
xhtml の場合、xml 宣言があると互換モードになってしまうというあたりがアレですね。IE7 ではここら辺りは完全ではないものの解消されています。
http://blog.drry.jp/2006/02/25/ie7-b2-xhtml
何か作業中のようなので、もし見られない場合は、
http://72.14.235.104/search?q=cache:xmmgJ5WVYAIJ:blog.drry.jp/20...
あたりをどうぞ。
そうなんですか、IE6 でも・・・!今回対象のサイトには・・・なんと文書型宣言が入れられません(泣)これはなかなか辛いところです。
XHTML ではないので、ちょっと希望がもてました。ありがとうございます。なんとか文書型を入れられるように、努力してみます。
上記サイトは作業中とのことで、少し安心しました。回答ありがとうございました。
IE 7 Beta 3です。
このバグは修正されていると思います。
とりあえずHTML 4.01、XHTML 1l0で、それぞれTransitional/Strict、XML宣言ありと無しの組み合わせを試してみましたが問題ありませんでした。
以下、簡略化のためbody要素内のみ、style属性でスタイルを指定しています。
<body>
<div style="width: 100px; border: 1px solid #000; margin: 0 auto;">
<h1>見出し</h1>
<p>パラグラフ</p>
</div>
</body>
div要素の幅を指定していない等が原因ということはないでしょうか?
ダミーです
なるほど、細い回答ありがとうございます。
div の幅、試してみようと思います。
IE7(IE6でも可)のセンタリングは文書型宣言の種類が標準モードのときに限りできます。
試しに下のHTMLを保存してIE7で実行して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>テスト</title>
<div style="margin-left:auto;margin-right:auto;width:10em;border:1px solid red;">センタリング</div>
文書型宣言の種類と表示されるモードについては下のサイトを見てください。
ありがとうございます。ただ、本日出ている記事で、重要度の高い自動更新で IE7 を配布
http://internet.watch.impress.co.jp/cda/news/2006/07/27/1280...
という記事も出ていたので、出来うる限りの調査が必要と考えています。
このサイトが閉鎖してしまっているのは非常に残念ですね。