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

解決済

質問者：kitty1000
質問日時：2009/07/03 23:16
回答数：13件

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;
}

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

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (13件中11～13件)

ベストアンサー優先
最新から表示
回答順に表示

No.3

回答者： salonpath
回答日時：2009/07/03 23:46

質問2

#2さんの回答の補足ですが
「ショートハンド」をgoogleで検索してみてください

---
質問3
>以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？

widthがないからですね。
text-align: center;の意味はテキスト（インライン要素）をcenter配置です

DOCTYPEスイッチの後方互換モードや標準モードはご存知ですか？
http://codezine.jp/article/detail/2479

この回答への補足

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

参考にさせて頂きます。

>DOCTYPEスイッチの後方互換モードや標準モードはご存知ですか？
>http://codezine.jp/article/detail/2479
上記のサイトでは、DOCTYPEスイッチの各種類の記述方法までは記載されていませんでしたが、種類及びその記述方法をできたらお教えください。

補足日時：2009/07/05 18:37

通報する

- 0
- 件

通報する

この回答へのお礼

salonpathさん
補足を書く場所が無いので、ここに書きます。

>DOCTYPEスイッチの後方互換モードや標準モードはご存知ですか？
DOCTYPEスイッチの後方互換モードや標準モードに関する知識は余りありませんでした。

ただ、ここでDOCTYPEスイッチの質問を混ぜると論題がそれる可能性がありますので、DOCTYPEスイッチの後方互換モードや標準モードに関する質問は下記スレッドに分離しました：
http://oshiete1.goo.ne.jp/qa5100991.html

通報する

お礼日時：2009/07/05 19:46

No.2

回答者： think49
回答日時：2009/07/03 23:32

何かいろいろと勘違いされているようです。

- "margin: 0px auto;" と "margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px;" は等価です。
- DOCTYPE宣言をしていれば、"margin: 0px auto;" でIE6,7,8その他モダンブラウザでセンタリングされます。
- "text-align: center" でブロックレベル要素がセンタリングされるのはIE6の後方互換モードだけです

ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0004.h …

この回答への補足

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

>- DOCTYPE宣言をしていれば、"margin: 0px auto;" でIE6,7,8その他
>モダンブラウザでセンタリングされます。
think49さんがおっしゃっている「DOCTYPE宣言」とは、いかのようなものでよいのでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

よろしくお願いします。

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

通報する

- 0
- 件

通報する

No.1

回答者： salonpath
回答日時：2009/07/03 23:31

質問1

width:80%が必要なのではなく
width自体が必要なんです
widthの指定されたmarginの左右がautoの要素がセンタリングされます。
widthなしのmargin:0 autoなど疑問を持った場所を自分で試してみましたか？

あとbodyタグのセンタリングとはどうゆう状態ですか？

この回答への補足

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

>width自体が必要なんです
了解しました。
>widthなしのmargin:0 autoなど疑問を持った場所を自分で試してみま
>したか？
width指定が無ければ、divが画面の端から端まで伸びてしまい、margin:0 autoなどの意味が無いですね。

>あとbodyタグのセンタリングとはどうゆう状態ですか？
こちらも私の疑問なのですが：
IE7又はそれ以前のIEでは、スタイルシートのbody内にtext-align:center;を指定すると、HTMLのbodyタグ内の要素がセンタリングされて表示されていました。IE8では、この特徴がなくなり、スタイルシートのbody内にtext-align:center;を指定していてもHTMLのbodyタグ内の要素が左端に表示されてしまいます（下記コード参照）。

<style type="text/css">

</style>
</head>
<body>
<table border=4 width=250>
<tr bgcolor="#cccccc">
<th>例</th>
<th>列-A</th>
<th>列-B</th>
</tr>
<tr align=center>
<td>例1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr align=center>
<td>例-2</td>
<td>A2</td>
<td>B2</td>
</tr>
</table>
</body>

上記のコードは、正しくは以下のように書くということですか？
<style type="text/css">

</style>
</head>
<body>
<table class="center2" border=4 width=250>
<tr bgcolor="#cccccc">
<th>例</th>
<th>列-A</th>
<th>列-B</th>
</tr>
<tr align=center>
<td>例1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr align=center>
<td>例-2</td>
<td>A2</td>
<td>B2</td>
</tr>
</table>
</body>

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

皆さん、よろしくお願いします。