ブロック要素をセンターリングするには

　table要素を使って、表組みを行い、それをセンターリングして表示するために、CSSを書こうとしたのだが、どこをどう探しても、適切な属性が見つからない。要するにブロック要素全体をセンターリングするための属性が、現在のCSSにはないようなのだ。

　そこで、Web検索を行い、Web標準普及プロジェクトというサイトにたどり着いた。このサイト自体は、ブラウザーを選ばないHTMLを書くためのTipsを提供しているサイトだが、そこにブロック要素をセンターリングするためのスタイルシートの書き方が掲載されていた。

　たとえば、table要素をセンターリングするには、

body { width: 700px; }
table { margin-left: auto;
            margin-right: auto;
            width: 660px;}

とすればよい。

　ポイントは、左右のマージンをそれぞれautoにしておき、テーブルの横幅を明示的にサイズ指定する、ということだ。こうすると、2つのautoは、テーブルの外側を包む箱（上の場合はbody自体）の幅から、テーブルのサイズを引いた残りを、ちょうど二等分することになる。つまり、テーブルの両側のマージンが同じ長さになり、テーブルが中央に配置されるのだ。

　これは、上のサイトによると、Internet Explorer 6のバグで正しく表示されないそうだ。僕はMacを使っているので試していないが、上の説明はCSSの正しい解釈なので、それを表示できないとすればIEのバグと言うことになるだろう（確認はしていない）。

　しかし、世の中で最も大きいシェアを占めているのは、そのバグをはらんだIEである。だから、上に挙げたような、「ブラウザーに依存しないHTMLを書く」にはどうしたらいいか、というサイトが必要となるのだろうが、これはあくまで必要悪であって、まずは正しいHTMLやCSSを書き、最も普及しているものでも確認して、意図通りに見えるように調整をするようにすべきだ、というのが上のサイトでの提案である。