PSLブログ

ヨシナシゴトヲツヅリマス

IE6でブロック要素のセンタリングをする

先日htmlページのコーディングの案件で、divブロックをセンタリングするために、

margin: 0 auto;

と指定したところ、これがIE6では無視されてしまうことがわかった。未だIE6に対応しなければならないのもしんどいが、実際使われているので仕方がない。

回避方法が「ブロックレベル要素をセンタリングする方法」に載っていた。

IE6では、text-align: center; で、子要素のセンタリングができてしまうため、

<div style="text-align: center;"> <div style="width:800px; text-align:left;">ブロックレベル要素</div> </div>

のようにすればよい。つまり、センタリングしたいブロックの外側のブロックで text-align: center; を指定する。それだけだと、子要素のブロック内でインライン要素もセンタリングしてしまうので、今度はtext-align: left; を指定する。

cssの規則からするとおかしいのだが、とりあえずこれだけの設定でなんとかなった。