CSSを使ってブロック要素をセンタリング(中央揃え)する時の基本は、
1. widthで幅を指定(％可)
2. marginで左右の隙間をautoにする
例：div.container{
width:700px;
margin-right:auto;
margin-left:auto;
}
だが、Win IEはこれではセンタリングしてくれない。
Win IEは親要素のtext-align:centerが本来ならばインライン要素限定なのにブロック要素にも適応されるので、これを利用して、
1. widthで幅を指定(％可)
2. marginで左右の隙間をautoにし、text-alignでテキストの表示位置を指定する。
3. 親要素でテキストをセンタリングする。
例：body{
text-align:center;
}
div.container{
width:700px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
DIVブロックについてはこれでOK。
しかし、tableはMac IEの互換モードでは上の方法でセンタリングしてくれない(標準モードはOK）。
親要素をtext-align:leftにするとセンタリングされる。
ここでWin IEと指定がかぶって困るので、Win IEが対応していない(無視する)子供セレクタを利用する。
ついでにMac IEはテーブルはmarginを一括指定するとダメだという我侭っぷりなので、個別指定にするのも忘れずに、
1. widthで幅を指定(％可)
2. margin-rightとmargin-leftで左右の隙間をautoにし、text-alignでテキストの表示位置を指定する。
3. 親要素でテキストをセンタリングする。
4. 親要素で子供セレクタを使ってテキストを左寄せにする。
例：body{
text-align:center;
}
html>body{
text-align:left;
}
table.container{
width:700px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
↑この書き方でほぼブロック要素のセンタリングはいけると思う。
PR
