2006年2月28日(火) 23時59分34秒 [Web関連]

CSSでのボックスのセンタリング

スタイルシートでボックスをセンタリングしたい場合の正攻法は、marginプロパティの値にautoを指定する方法。marginプロパティの値にautoを指定すると、左右の余白を均等に取ってくれるので、結果としてセンタリングされることになります。

…が、この方法では、IEが解釈してくれません。

そこで、marginプロパティに値autoを指定すると同時に、text-alignプロパティに値centerを指定します。すると、IEでもボックスをセンタリングしてくれます（※スタイルシート的には誤った解釈）。そのままだと、スタイルシートを正しく解釈するブラウザで、ボックスの中身（のテキスト）がセンタリングされてしまうので、ボックスに対して、text-alignプロパティに値leftを指定して、（テキストを）左寄せに戻しておきます。

…なんとも面倒です。

言葉だとワケわかんないので、ソースを書いてみると、次のようになります。div要素の中に、センタリングしたいp要素（横幅を80%に指定）がある場合と思って下さい。

で、これは、センタリングしたいボックスの中身の横幅が（欲しい横幅よりも）小さい場合向け。例えばtable要素とか。

上記で挙げたように、p要素とかデフォルトで横幅を限界まで占有してくれるボックスの場合は、正攻法を使うよりも、左右の余白に同じ値を指定することでセンタリングさせるのが楽。これなら、1行で済むし。

p要素でなくて、table要素みたいなのでも、ボックスの中身がとってもたくさんあって、（何も指定しなければ）ウインドウの端から端まで占拠しちゃうよ…という場合にも有効。

p要素をセンタリングしたい場合、次のように書くだけでしょう。

これだと、p要素の左右に、それぞれ10%分の余白ができます。左右の余白が均等だから、結果、センタリングされているように見えます。（左右それぞれ10%だから、ボックスの横幅は80%になります。）
この方が楽。

※text-alignプロパティに値centerを指定することで、その中身のボックスがセンタリングされるのは、スタイルシートとしては誤った解釈。本来は、ボックスそのものがセンタリングされるのではなく、ボックス内のテキストがセンタリングされることになります。（IEの解釈はおかしくて、ボックスそのものをセンタリングしちゃう。）