質問: 本文 | ○○○ | | 内容 | 内容 | ~行が続きますが省略~ のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 ie8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
回答: 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)。