質問

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものを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にしたところテーブルが左寄せになってしまいました。

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

通報する

回答 (2件)

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

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;
}
にしたところ、うまくいきました。ありがとうございました。

このQ&Aは役に立ちましたか?3 件

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

新しく質問する

注目の記事

おしトピアプリ登場記念!コメントで最大1万円分のギフト券があたる!

話題のトピックにさくっとコメントできる「おしトピ」にAndroid版アプリに続きiPhoneアプリも登場! どちらかのアプリをダウンロードして指定のオーダーにコメントした方に抽選で最大1万分のアマゾンギフト券をプレゼント! フジテレビ出身のフリーアナウンサー長谷川豊氏の質問にも回答受付中!


新しく質問する

このカテゴリの人気Q&Aランキング

毎日見よう!教えて!gooトゥディ

べんりQ&A特集