The Preparation Room

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

↑この書き方でほぼブロック要素のセンタリングはいけると思う。

そういえばブロック要素のセンタリングに関して、Netscapeもめんどくさいバグがある。
widthで指定した幅が絶対指定(px)の場合、指定した幅よりもウィンドウサイズを小さくすると、ブロック要素の左側が隠れてしまう。
marginをautoにした場合、普通は最小のマージンが0になるのだが、なぜかマイナスになってしまうようだ。
左のマージンを0など、auto以外の値にすれば隠れる事はなくなるのだが、それだとウィンドウサイズが大きくてもセンタリングされない。

ちなみに、tableタグの場合はウィンドウ幅よりテーブルの幅が大きくてもバグが起きず、問題なく表示される。

ということは‥、display:table;とdisplay:table-cell;を使ってやると解決するんだなこれが。
意外にも、Netscape6以降ぐらいならこれに対応してる様子。
display:table;がtableタグにあたり、display:table-cell;がthやtdタグにあたる。
一段ならばtrにあたるdisplay:table-row;は書かなくてもOK。
入れ子が一つ増えるのは気分が悪いけど、隠れて読めなくなるよりまし‥かもしれない。