センタリングの不具合（IE/margin）

InternetExplorerの不具合

InternetExplorerではスタイルシートのセンタリングの解釈に不具合があり、通常の設定では対象が中央揃えになりません。

この不具合が報告されているのは以下の場合です。

• InternetExplorer 5.5以前のバージョン
• InternetExplorer 5.5以降のバージョンかつ互換モードで表示時

ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。

具体的な不具合

ブロックレベル要素の幅を指定し、その要素をブラウザや親要素に対して中央揃えする場合、以下のように、widthプロパティによって要素の幅を指定し、左右のマージンの設定を『auto』にする必要があります。

以下のサンプルは上のブラウザ条件以外で閲覧した場合、対象の要素（p）自体が（BODY要素、つまり画面に対して）正しく中央揃えされて見えるはずです。

しかし、IE5.5以前、もしくは5.5以降でも互換モードで書かれた以下の例のようなページは、IEで見た場合、センタリングされず、正しく表示されません。

対処方法

この問題を回避するには、InternetExplorerにおけるtext-alignプロパティの解釈の不具合を利用します。

IEでは「ブロックレベル要素を対象とするtext-alignプロパティの継承の仕方に不具合がある」というものがあります。

通常、親要素にtext-alignプロパティを指定した場合、子要素にプロパティの値が継承されます。

継承する値は親要素に対するその子要素自体の位置揃えに影響を与えますが、IEでは子要素の中身にまでtext-alignプロパティの値が継承されてしまいます。

IEではこの部分に不具合があります。

この不具合を利用して要素がセンタリングされない問題に対処するには、中央揃えをしたいブロックレベル要素をさらにDIV要素などで囲み、そのDIV要素に対し、text-alignプロパティを指定し、中央揃えを実現します。

ただし、この場合だと、前述の不具合で子要素の中身もセンタリングされてしまいます。

従って、これを戻すには、内側の子要素に対して、さらにtext-alignプロパティを指定し、目的の位置揃えにする必要があります。