IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
　 <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
～行が続きますが省略～
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

No.2 ベストアンサー 回答者： t_freak 回答日時： 2009/11/05 15:37

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、

「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

＜解説＞
div、table、pなどブロック要素をセンタリングするには、左右のmargin（外余白）をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない（これでセンタリングされるのはテキストや画像などのインライン要素のみ）のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。

この回答へのお礼

回答ありがとうございます。
No1さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。

お礼日時：2009/11/05 17:46

No.1 回答者： 4017B 回答日時： 2009/11/05 05:24

cssの記述に

div#main, div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: center;
}

～を適当に追記してみて下さい。

この回答へのお礼

解凍ありがとうございます。いただいたソースを編集して
div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: left;
}
にしたところ、うまくいきました。ありがとうございました。

お礼日時：2009/11/05 17:43