IE８ではtext-align: center;でdivタグが中央にならない。改善策は？

IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。
http://oshiete1.watch.impress.co.jp/qa4989799.html

上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。
CSSでは以下のように記述：
div.center {
width: 80%;
margin-right: auto;
margin-left: auto;
}

HTMLではセンタリングさせたいdiv要素を以下のように記述：
<div class="center">文章等<div>

＜質問1＞
ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div>
を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？

また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？

＜質問２＞
「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？
また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？
＜divタグをセンタリングしたい場合＞
CSSでは以下のように記述：
div.center {
width: 80%;
margin:0 auto
}
上記の記述で
div.center {
width: 80%;
margin-right: auto;
margin-left: auto;
}
と全く同じ表示になるのでしょうか？

＜bodyタグをセンタリングしたい場合＞
CSSでは以下のように記述：
body {
width: 80%;
margin:0 auto
}
上記の記述で
body {
width: 80%;
margin-right: auto;
margin-left: auto;
}
と全く同じ表示になるのでしょうか？


＜質問3＞
IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？
以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？
{
text-align: center;
margin-right: auto;
margin-left: auto;
}
又は
{
text-align: center;
margin:0 auto;
}

関連サイト等あれば、そちらも教えてください。

よろしくお願いします。

No.4 ベストアンサー 回答者： po-pe-tian 回答日時： 2009/07/04 00:11

回答した本人です。

まず、私の回答の間違いを１つ。

HTMLではセンタリングさせたいdiv要素を以下のように記述：
<div class="center">文章等<div>
の部分で、終了タグに"/"が入っていませんでした。
正確には
<div class="center">文章等</div>
です。

＜質問1＞
80%と記載した意味は特にありません。私が回答する前の回答者様が80%と記載されていましたので、それを使わせていただいただけです。
widthプロパティに指定する値は、60%でも70%でも、1000pxでも800pxでも何でもいいです。

＜質問２＞
これも私が回答する前の回答者様の記載を使わせていただいただけです。div要素だけで考えれば、どちらでも同じだと思います。
デフォルトである程度のマージンが付く要素もありますので、個人的には
margin:0 auto;
と記載する方がいいと思います。
(各ブラウザのデフォルト値を上書きして、ブラウザの違いによる表示に違いを生じさせないため)

body要素は、ブラウザの表示領域全体を表すものなので、body要素をセンタリングする意味はありません。

div.center {
width: 80%;
margin:0 auto
}
は、表示領域全体の80%の幅の領域をセンタリングさせるためにdiv要素を使用する(表示領域全体の10%分左右に余白をつける)為のものです。

＜質問3＞
text-align:center;
はセンタリングさせたい要素の親要素に指定しなければなりません。
http://nagomin0123.web.fc2.com/centering/m_cente …
では、p要素(オレンジ色の部分)をセンタリングさせるためにp要素に
margin:0 auto;
を指定し、その親要素であるdiv要素(青色の部分)に
text-align:center;
を指定しています。

この回答への補足

po-pe-tianさん
ご回答、ありがとうございました。

>div要素だけで考えれば、どちらでも同じだと思います。
>デフォルトである程度のマージンが付く要素もありますので、個人的には
>margin:0 auto;
div要素以外に「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合では表示結果が異なる要素があるのでしょうか？

> body要素は、ブラウザの表示領域全体を表すものなので、body要素をセンタリングする
>意味はありません。
No1さんの回答への補足に書きましたが：
IE7又はそれ以前のIEでは、スタイルシートのbody内にtext-align:center;を指定すると、HTMLのbodyタグ内の要素がセンタリングされて表示されていました。IE8では、この特徴がなくなり、スタイルシートのbody内にtext-align:center;を指定していてもHTMLのbodyタグ内の要素が左端に表示されてしまいます（No1さんの回答への補足のコード参照）。

私の思い違いかもしれませんが、CSSのmargin-right: 又はmargin-left:を<table>タグ内に幅が指定してあるテーブル（上記のようなテーブル。例：<table 省略… width=250>
）に適用すると、テーブルの幅（width）が指定どおりにならないと読んだことがあるような気がします。そのような問題はないのでしょうか？

よろしくお願いします。

補足日時：2009/07/05 19:56

No.13 回答者： salonpath 回答日時： 2009/07/06 17:33

とりあえず、今回の表題である「IE８ではtext-align: center;でdivタグが中央にならない。

改善策は？」の改善策は
「（DOCTYPEを正しく記述して）divの横幅を決めて左右のmarginをautoにする」で解決できましたか？


■>CSSのmargin-right: 又はmargin-left:を<table>タグ内に幅が指定してあるテーブル（上記のようなテーブル。例：<table 省略… width=250>
）に適用すると、テーブルの幅（width）が指定どおりにならない

これはちょっと聞いた事がないです、試しに製作してるものもそういった挙動をしてませんし。
関係ないかもしれませんが、floatと左右のmarginを同時に指定するとIE6はmarginが倍になるバグならあります。


■>正しくは以下のように書くということですか？
#12さんが書いてくれてるので
自分ならこう書くという例を
css
table{
border-collapse:collapse;
}
th, td{
border:1px solid #333;
padding:5px 10px;
text-align:center;
}
th{
background:#ccc;
}
.center2{
width:250px;
margin:0 auto;
}

html
<table class="center2">
<tr>
<th>例</th>
<th>列-A</th>
<th>列-B</th>
</tr>
<tr>
<td>例1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>例-2</td>
<td>A2</td>
<td>B2</td>
</tr>
</table>

理由
・widthはcss側でまとめて記述したほうが修正もしやすいしわかりやすい

この回答へのお礼

salonpathさん
ご回答、ありがとうございました。

参考にさせて頂きます。

>とりあえず、今回の表題である「IE８ではtext-align: center;でdiv
>タグが中央にならない。改善策は？」の改善策は「（DOCTYPEを正しく
>記述して）divの横幅を決めて左右のmarginをautoにする」で解決でき
>ましたか？
現在コード修正中ですが、皆さんの回答を参考にして解決できると思います。

どなたか他の意見を述べたい方もいらっしゃるかも知れませんので、スレッドはこのままもう少しオープンにしておきます。

お礼日時：2009/07/07 16:29

No.12 回答者： po-pe-tian 回答日時： 2009/07/06 11:24

>これについて、私の改善したコード（No1さんの回答への補足の2つ目のコード）の記述は正しいのでしょうか？

ブロックレベル要素(今回はtable要素)をセンタリングするために
.center2 {
margin-right: auto;
margin-left: auto;
}
__________________________________________

<table class="center2" border=4 width=250>

で実現するのは正しいです。
(属性値"もしくは'で囲いましょう。
table class="center2" border="4" width="250">)


http://www.y-adagio.com/public/standards/tr_css2 …
'margin-left'及び'margin-right'の両方が'auto'である場合，両者の計算値は同じとなる。と記載されています。

CSSの正しさだけを追求してサイトを作成するなら、text-align:center;は必要ありませんが、IE系の解釈が間違っているため、IE系でもセンタリングさせたい場合は、text-align:center;を併用しなければなりません。

今回の例ではbodyのクラスセレクタにtext-align:center;を追加すると、IE系でもセンタリングされます。

body {
background-color:#CCCCCC;
text-align:center;
}

この回答へのお礼

po-pe-tianさん
ご回答、ありがとうございました。

参考にさせて頂きます。

お礼日時：2009/07/07 16:25

No.11 回答者： think49 回答日時： 2009/07/06 11:11

#5です。

> わたしは、「HTML4.01 Transitional」のシステム識別子“あり”のAlmost Standardsでテストしましたが、IE7又はそれ以前のIEであればtext-align: center" でブ> ロックレベル要素がセンタリングされました。もう一度検証してみてください。
失礼しました。確かにその挙動を確認しました。
下記HTMLを「IE Tester」で検証してみました。

1. text-align でブロック要素を揃える
http://2xup.org/sample/displaymode/samples/text- …
2. text-align でブロック要素を揃える (XML 宣言無し)
http://2xup.org/sample/displaymode/samples/text- …
3. text-align でブロック要素を揃える (DOCTYPE 宣言無し)
http://2xup.org/sample/displaymode/samples/text- …

1. text-align でブロック要素を揃える
IE6(後方互換モード) … センタリングされる
IE7(標準準拠モード) … センタリングされる
IE8(標準準拠モード) … センタリングされない

2. text-align でブロック要素を揃える (XML 宣言無し)
IE6(標準準拠モード) … センタリングされる
IE7(標準準拠モード) … センタリングされる
IE8(標準準拠モード) … センタリングされない

3. text-align でブロック要素を揃える (DOCTYPE 宣言無し)
IE6(後方互換モード) … センタリングされる
IE7(後方互換モード) … センタリングされる
IE8(後方互換モード) … センタリングされる

IE6,IE7では、標準準拠モードでもセンタリングされることを確認しました。
対する margin:0px auto; ですが、は標準準拠モードであれば、IE6,IE7,IE8でブロックレベル要素をセンタリングできる事を確認しました。

---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>Standards mode</title>
</head>
<body>
<div style="margin: 0px auto; width: 80%; background-color: #fee;">block element</div>
</body>
</html>
---------

IE6(標準準拠モード),IE7(標準準拠モード) は text-align:center; でも margin:0px auto; でもセンタリングできるようです。
ちょっと面倒な仕様ですね…。

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
http://2xup.org/log/2007/07/27-2111

この回答へのお礼

think49さん
ご回答、ありがとうございました。

参考にさせて頂きます。

お礼日時：2009/07/07 16:25

No.10 回答者： xs200 回答日時： 2009/07/06 00:45

#6です。

補足への回答ですが、それでうまくいくはずです。
ただし、やってみるとわかりますがセルの中にイメージを入れるとイメージの下に隙間が入ってしまいます。
だんだん継ぎ足しになってしまいますが、
td img { display: block; margin: 0 auto; }
を入れれば隙間はなくなります。
もしくはvertical-align:bottom;で対応します(イメージがセルの高さより高くないとだめですが)。

この回答へのお礼

xs200さん
ご回答、ありがとうございました。

参考にさせて頂きます。

お礼日時：2009/07/07 16:24

No.9 回答者： po-pe-tian 回答日時： 2009/07/05 23:14

>「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合では表示結果が異なる要素があるのでしょうか？

ありますよ。

以下のソースで、余白が付く場合とつかない場合が出てくると思います。

<html>
<head>
<style type="text/css">
div{
background:blue;
}
p.test{
margin:0 auto;
background:red;
}
p.test1{
margin-left:auto; margin-right:auto;
background:red;
}
</style>
</head>

<body>
<div>
<p class="test">test</p>
<p class="test">test</p>
</div>
<div>
<p class="test1">test1</p>
<p class="test1">test1</p>
</div>
</body>
</html>

ブロックレベル要素にmargin:0 auto;(margin-left:auto; margin-right:auto;)を指定した場合、そのブロックレベル要素がセンタリングされないのはIE系の過去互換モードのバグです。
http://nagomin0123.web.fc2.com/centering/centeri …

text-align:center;が親要素に指定されている場合、その子要素であるブロックレベル要素がセンタリングされるのもIE系(これは過去互換モードにかかわらず、IE6,IE7の標準モードでも起こります)のバグです。
http://nagomin0123.web.fc2.com/text-align/text-a …
この２つのバグを利用して、IE系でも、他のブラウザでも全てセンタリングさせるようにしたものが、センタリングさせたい要素の親要素に
text-align:center;を指定し、センタリングさせたい要素には
margin:0 auto;を指定すると言う方法です。http://nagomin0123.web.fc2.com/centering/m_cente …

table要素の不具合については、よくわかりません。

この回答への補足

po-pe-tianさん
お礼を書いた後ですが、少し補足質問します：

No1さんの回答への補足に書きましたが：
IE7又はそれ以前のIEでは、スタイルシートのbody内にtext-align:center;を指定すると、HTMLのbodyタグ内の要素がセンタリングされて表示されていました。IE8では、この特徴がなくなり、スタイルシートのbody内にtext-align:center;を指定していてもHTMLのbodyタグ内の要素が左端に表示されてしまいます（No1さんの回答への補足のコード参照）。

これについて、私の改善したコード（No1さんの回答への補足の2つ目のコード）の記述は正しいのでしょうか？

補足日時：2009/07/06 00:13

この回答へのお礼

po-pe-tianさん
ご回答、ありがとうございました。

参考にさせて頂きます。

お礼日時：2009/07/05 23:59

No.8 回答者： think49 回答日時： 2009/07/04 22:21

#2,5,7です。

改めて「ブロックレベル要素をセンタリングする方法」を解説します。

** DOCTYPEスイッチ **
多くのブラウザはDOCTYPE宣言の有無で描画モードが切り替わります。

標準準拠モード … Web標準に準拠した描画モード。多くのブラウザで同じように描画される。
後方互換モード … 下位互換性を重視した描画モード。古いブラウザと同じように描画され、他ブラウザとの互換性がない。

Google検索: DOCTYPEスイッチ
http://www.google.co.jp/search?q=DOCTYPE%E3%82%B …

後方互換モードの時、IEは「text-align:center; でブロックレベル要素をセンタリングします」が、これはIEのバグです。
そのため、FirefoxやOperaなどのモダンブラウザでは、text-align:center; でブロックレベル要素をセンタリングしません。
以下、それぞれの描画モードでブロックレベル要素をセンタリングする方法を解説します。

** 標準準拠モードでブロックレベル要素をセンタリングする **
標準準拠モードで描画するため、DOCTYPE宣言を入れます。
"margin: 0px auto;" によって、IEを含めた全ブラウザでブロックレベル要素がセンタリングされます。

---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<title>Standards mode</title>
</head>
<body>
<div style="margin: 0px auto; width: 80%; background-color: #fee;">block element</div>
</body>
</html>
---------

** 後方互換モードでブロックレベル要素をセンタリングする **
後方互換モードで描画するため、DOCTYPE宣言を入れません。
IE以外のモダンブラウザは "margin: 0px auto;" でブロックレベル要素をセンタリングしますが、
IEは text-align:center; でブロックレベル要素をセンタリングします。(IEの方がWeb標準に準拠していない動作)

---------
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<title>Quirks mode</title>
</head>
<style type="text/css">
body{
text-align: center;/* IEでブロックレベル要素をセンタリング */
}
body *{
text-align: left; /* bodyで指定した "text-align:center;" を子要素に継承させないために、text-align:left; を指定する */
}
</style>
<body>
<div style="margin: 0px auto; width: 80%; background-color: #fee;">block element</div>
</body>
</html>
---------

スタイルシート［CSS］/テキスト・フォント/水平方向の表示位置を指定する - TAG index Webサイト
http://www.tagindex.com/stylesheet/text_font/tex …
スタイルシート［CSS］/ボックス/ボックスのマージン（外側の余白）を指定する - TAG index Webサイト
http://www.tagindex.com/stylesheet/box/margin.html
margin CSS ボックス
http://w3g.jp/css/box/margin

この回答への補足

think49さん
ご回答、ありがとうございました。

参考にさせて頂きます。

>多くのブラウザはDOCTYPE宣言の有無で描画モードが切り替わります。
ここでDOCTYPEスイッチの質問を混ぜると論題がそれる可能性がありますので、DOCTYPEスイッチの後方互換モードや標準モードに関する質問は下記スレッドに分離しました：
​http://oshiete1.goo.ne.jp/qa5100991.html​

補足日時：2009/07/05 23:52

No.7 回答者： think49 回答日時： 2009/07/04 21:29

>> #6さん

> テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。
おそらく#6さんは「text-alignプロパティはインライン要素に指定する」と受け取られたのだと思いますが、実際は「text-alignプロパティはインライン要素の位置揃えを指定する」なので間違っているわけではないと思います。
<div style='text-align:center;'> が出来ないという意味ではなく、<div style='text-align:center;'> でセンタリングされる対象が <span> や <img> などのインライン要素だ、と説明しているからです。

ただ、http://www.mozilla.gr.jp/standards/webtips0004.h … は誤解を生みやすい説明という認識はあり、前々から不満に思っていました。
これを読むと最終的には、

--------
<div style="text-align:center;border:black;">
<div style="margin-left:auto;margin-right:auto;text-align:justify;border:red;">
ブロックレベル要素
</div>
</div>
--------

でクロスブラウザなHTML+CSSになりますよ、と受け取ってしまいかねませんが、
実際は、DOCTYPE宣言をすれば、"margin-left:auto;margin-right:auto;" だけで済みます。
これは「片手落ちなんじゃないか」と思いつつも注意深く説明を読み直してみたら、上の方に小さく書いてありました。

--------
Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロックレベル要素がセンタリングされるのはWindows版のIEのみで、これは同ブラウザのバグです (ただし、IE6の標準準拠モードではこのバグは修正されています)
--------

「ただし、IE6の標準準拠モードではこのバグは修正されています」に集約しないで、もう少しつっこんでHTML(CSS)を書いて欲しかった。

それでも、私が知りうる限りでは最も綺麗にまとまっているページなので紹介しました。
誤解されやすい部分に関しては、#2と#3さんがDOCTYPEスイッチの補足をしてくださっているので十分だと認識していました。

と、長々と弁解してきましたが、ここまで来た以上、次の回答で足りない説明をきちんとまとめたいと思います。
同じ回答があったときに参考URLとして掲示できるように。

この回答へのお礼

think49さん
ご回答、ありがとうございました。

参考にさせて頂きます。

お礼日時：2009/07/05 23:40

No.6 回答者： xs200 回答日時： 2009/07/04 18:30

#2の回答で紹介されている

> ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
> http://www.mozilla.gr.jp/standards/webtips0004.h …​
はちょっと気にいりません。

> テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。

text-alignはブロック要素に指定するものです。自分たちで関連リンクとして紹介しているW3Cにこうあります。
'text-align'
Applies to: block-level elements

適用はブロック要素でその効果がおよぶのがブロック要素の中のインラインの内容です。インライン要素と言ったら間違いです。回答例にあるwidth: 80%;ならその80%の中でセンタリングされることになります。

画像などのインライン要素をセンタリングするなら
<div class="xxx"><img xxx></div>でdivをセンタリングします。
主なブラウザーで対応するには
body { padding-left: 50%; }
img { margin-left: -(画像の幅の半分)px; }
とすればいいです。

h1 { width: 50%; text-align: center; border: 1px solid; margin-left:auto; margin-right: auto; }
h2 { width: 50%; text-align: center; border: 1px solid; }

<h1>中央</h1>
<h2>中央</h2>

さあ、どうなるでしょう?
margin: auto;とtext-align: center;
がよくわかると思います。

この回答への補足

xs200さん
ご回答、ありがとうございました。

> 画像などのインライン要素をセンタリングするなら
> <div class="xxx"><img xxx></div>でdivをセンタリングします。
> 主なブラウザーで対応するには
> body { padding-left: 50%; }
> img { margin-left: -(画像の幅の半分)px; }
> とすればいいです。
テーブルのセル内などで画像をセンタリングするには、以下のような書き方でよかったでしょうか？
CSS：
.test_img {
text-align:center;
background-color:#00FF00;
}
HTML:
<table border="1" width="400" cellpadding="0" cellspacing="0">
<tr>
<th width="197">例</th>
<th>列-A</th>
</tr>
<tr>
<td width="200">例1</td>
<td bgcolor="#FF0099">
<div class="test_img"><img src="img/test_img.jpg" width="100" height="100" border="0"></div>
</td>
</tr>
</table>

また、xs200さんの例のようにbodyタグ内の画像をdivタグを利用して直接センタリングする場合でも、このスレッドの流れからいうと以下のようでも良いですか？
<div class="test_img"><img xxx></div>でdivをセンタリングします。
.test_img {
margin:0 auto;/*divタグをbodyの中央へ*/
text-align: center;/*イメージをdiv要素の中央へ*/
}

よろしくお願いします。

補足日時：2009/07/05 23:31

No.5 回答者： think49 回答日時： 2009/07/04 01:15

#2です。

一つ訂正を。

> - "text-align: center" でブロックレベル要素がセンタリングされるのはIE6の後方互換モードだけです
後方互換モードであれば、IE系全てですね。

>> #3さん
> 「ショートハンド」をgoogleで検索してみてください
「ショートハンド」というキーワードは知りませんでした。勉強になります。

この回答への補足

think49さん
ご回答、ありがとうございました。

>> - "text-align: center" でブロックレベル要素がセンタリングされ
>>るのはIE6の後方互換モードだけでね。
>後方互換モードであれば、IE系全てですね。
IE７又はそれ以前のIEであれば、後方互換モードだけではなく、標準準拠モード(Standards)でも"text-align: center" でブロックレベル要素（div）がセンタリングされます。
わたしは、「HTML4.01 Transitional」のシステム識別子“あり”のAlmost Standardsでテストしましたが、IE７又はそれ以前のIEであればtext-align: center" でブロックレベル要素がセンタリングされました。もう一度検証してみてください。

補足日時：2009/07/05 20:04