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

ものっそ今更な記事。
XML宣言掛けたXHTMLだと、IE6が後方互換モードで動作するため、marginのauto指定でブロック要素のセンタリングができない。

<body>
   <div class="content">
      <p>ですとろーい</p>
   <!-- /div.content --></div>
</body>

上記の場合、margin: autoを掛けただけでは、div.contentがIE6で左側に表示されてしまう。
ただし、IE6以前のIEでは、text-alignで内包するブロック要素まで配置を変更する仕様になっているので、以下のCSSで対処可能。

div.content{
	width:500px;
	margin:0 auto;
}

/* ie6対策 */
* html body{
	text-align:center;
}* html div.content{
	text-align:left;
}

あと、position:absoluteとマイナスマージンを使って擬似的にセンタリングする手も。

div.content{
	position:absolute;
	left:50%;
	width:500px;
	margin:0 0 0 -250px;
}

上記に関係なく、標準準拠モードではmargin:autoでセンタリングできる。

毎日がひとりオフ