初心者が CSS を使ったデザインでつまづく（失敗する）ことが多い事例に Microsoft Internet Explorer にだけに偏った表示確認をするために、Windows版Internet Explorer 6 のバグが原因で発生する text-alignプロパティの誤用があります。本文書では、CSS デザインによる論理構造と表現（見栄え）とを分離させる一歩として div要素の align属性や center要素による (X)HTML自体での表示の指定を、CSS による代替のみでブロック要素の左右揃えをコントロールする手法を解説します。
div要素の align属性や center要素とは異なり、text-alignプロパティによる指定では横幅の指定されたブロック要素自身の水平方向の位置揃えを指定することはできません。text-alignプロパティはインラインの内容（テキストや画像）の位置を指定するものであって表示域における横幅の指定されたブロック要素自身の位置揃えを指定するものではありません。ただし、Windows版Internet Explorer 6 においてはバグのために text-alignプロパティによる指定で横幅の指定されたブロック要素自身の位置揃えが反映されてしまいます。
その結果、Windows版Internet Explorer 6 でしか表示の確認を行っていないと思われる制作者の多くが "text-align : center ;" の指定をブロック要素自身の位置揃えに誤用している場合が多く見受けられます。そして、これが Windows版Internet Explorer 6 のみに偏った表示確認が原因で発生する、初心者が CSSデザインを行う際に、最もつまづくことの事例となっているのです。本文書では CSS でブロック要素の左右中央揃えを行うにあたってブラウザ間での表示の差異をなくした現実的かつ適切な手法を解説します。
margin-left : auto ; margin-right : auto ;
横幅の指定されたブロック要素に対して、左右のマージンを "auto" にすると、横幅の指定されたブロック要素のボックスを中央揃え（センタリング）にするような左右に等分のマージンが算出されることになります。これにより横幅の指定されたブロック要素自身の中央揃えの指定が簡単に行えます。しかし、これだけでは大きな問題が発生します。Windows版Internet Explorer 6 のレンダリングモードが後方互換モードの場合は左右のマージンに "auto" の値が指定されても算出されるマージンは "0" になるというバグがあるため、中央揃えが行われない場合があるのです。そして、XHTML文書においては Windows版Internet Explorer 6 が XML宣言により レンダリングモードを自動的に後方互換モードに切り替えてしまうこともあって、左右に等分のマージンを算出することができません。そこで、Windows版Internet Explorer 6 では text-alignプロパティで横幅の指定されたブロック要素の左右中央揃えが反映されるバグを利用して、Windows版Internet Explorer 6 のためだけの "text-align : center ;" の指定を中央揃えを行う対象となるブロック要素の親要素に指定してやる必要があります。
<div style="text-align : center ;"> <table style="margin-left : auto ; margin-right : auto ;" border="1"><tr><td>横幅の指定されたブロック要素の中央揃え </td></tr></table></div>
これによりバグを抱える Windows版Internet Explorer 6 はもちろん、そのほかの主要視覚ブラウザにおいても横幅の指定されたブロック要素自身の中央揃えが CSS による代替指定のみでカバーすることができます。しかし、これでは正常に左右のマージンを算出する UA では中央揃えの対象となるブロック要素の親要素に指定されている "text-align : center ;" の指定でブロック要素のインラインの内容までもが一緒に中央揃えにされてしまいます。そこで、中央揃えの対象となるブロック要素には行内の左右揃えを指定する text-alignプロパティで、再度、文書内で使用する言語の書字方向にあわせた揃え方を指定します。たとえば、日本語の書字方向は左から右なので "text-align : left ;" をつけ加えます。
<div style="text-align : center ;"> <table style="margin-left : auto ; margin-right : auto ; text-align : left ;" border="1"><tr><td>ブロック要素の中央寄せ </td></tr></table></div>
| 横幅の指定されたブロック要素の中央寄せ |
このように、まず中央揃えの対象となる横幅の指定されたブロック要素の親要素に対して、バグを抱えている Windows版Internet Explorer 6 用の中央揃えの指定を行い、次に中央揃えで表示させたいブロック要素自体には CSS の仕様における正しい実装をした UA 用に左右に等分のマージンを算出させ、Windows版Internet Explorer 6 用に使っていた行内の内容の揃え方も、使用する言語の書字方向にあわせて再定義しなおすといった流れでブロック要素の中央揃えを実現することになります。
横幅の指定されたブロック要素を右揃えする場合も同様の手法です。Windows版Internet Explorer 6 用に、まず親要素に "text-align : right ;" を指定し、そして正しい実装をした UA 用に右揃えにしたいブロック要素に "margin-left : auto ; margin-right : 0 ;" を指定することで、右揃えの対象となるブロック要素の左側にボックスを右揃えにするマージンを算出させます。最後に Windows版Internet Explorer 6 用のバグで指定していた、"text-align : right ;" を文書で使用する言語の書字方向にあわせて再定義しなおします。日本語であれば、書字方向は左から右なので "text-align : left ;" をつけ加えます。
<div style="text-align : right ;"> <table style="margin-left : auto ; margin-right : 0 ; text-align : left ;" border="1"><tr><td>ブロック要素の右寄せ </td></tr></table></div>
| 横幅の指定されたブロック要素の右寄せ |
また、日本語の場合は、書字方向が左から右なのでデフォルトの状態で左揃えのため関係ありませんが、使用している環境の初期設定言語の書字方向や文書に設定されているデフォルト言語が右から左のヘブライ語やアラビア語、ペルシャ語などの場合であれば、上記の指定の左右方向を入れ替えるだけで、ブロック要素の左揃えも使用する言語の書字方向に適した行内の内容の揃えが可能になります。
原因不明ですが、Macintosh版Internet Explorer 5 にて表示確認したところ、本文書で解説した手法を用いても横幅の指定されたブロック要素の左右中央揃えの適切な表示はおこなわれず、中央揃えにした場合は、中央よりやや右寄りに表示されてしまいます。しかし、Macintosh ユーザーは、Macintosh版Internet Explorer 5 よりも正しい実装の Safari に完全乗換えの傾向にあるため、これに対して特に対策を施す必要はありません。今となっては、Macintosh版Internet Explorer 5 を利用しているユーザーは、1% にもなりません。Windows版Internet Explorer 6 のバグも次期バージョンの Windows版Internet Explorer 7 では改善されているため、Windows版Internet Explorer 7 が普及しだせば、このバグもすっかりと忘れ去られることでしょう。
また、Windows版Internet Explorer 6 での表示を気にしないという方は、仕様通りの "margin-left : auto ; margin-right : auto ;" や "margin-left : auto ; margin-right : 0 ;" の指定だけで横幅の指定されたブロック要素自身の左右中央揃えが可能なので、わざわざ Windows版Internet Explorer 6 用に無意味に div要素を追加したりする必要はありません。(X)HTML は構造化言語なのですから、このような水平方向の表示位置を指定するためだけの div要素は、(X)HTML で直接表示しているのと何ら変わらないので、はっきり言って無意味です。そう言った意味でも、こういったブラウザのバグの類には、振り回されないことが一番です。