W3G

text-alignプロパティの誤用に注意

div要素の align属性や center要素とは異なり、text-alignプロパティによる指定では横幅の指定されたブロックレベル要素（display:block;の状態の要素）自身の水平方向の位置揃えを指定することはできません。text-alignプロパティはインラインの内容（テキストや画像）の位置を指定するものであって、横幅の指定されたブロックレベル要素（display:block;の状態の要素）自身の位置揃えを指定するものではありません。ただし、それが Internet Explorer 6 においてはバグのために text-alignプロパティによる指定だけで、横幅の指定されたブロックレベル要素（display:block;の状態の要素）の位置揃えまでもが反映されてしまいます。

その結果、Internet Explorer6のシェアが全盛期だったころ、Internet Explorer6でしか表示の確認を行っていないと思われる制作者に "text-align : center ;" の指定をブロックレベル要素（display:block;の状態の要素）の位置揃えに誤用している場合が多く見受けられました。

CSS によるブロックレベル要素の中央揃え

margin-left : auto ; margin-right : auto ;

横幅の指定されたブロックレベル要素（display:block;の状態の要素）に対して、左右のマージンを "auto" にすると、横幅の指定されたブロックレベル要素（display:block;の状態の要素）のボックスを中央揃え（センタリング）にするような左右に等分のマージンが算出されることになり、これにより横幅の指定されたブロックレベル要素（display:block;の状態の要素）自身の中央揃えの指定が簡単に行えます。

しかし、Internet Explorer 6 のレンダリングモードが後方互換モードの場合は左右のマージンに "auto" の値が指定されても算出されるマージンは "0" になるというバグがあり、また当時、XHTML1.0への移行が進められてきたことで、もうひとつInternet Explorer6が抱えるバグであるXML宣言によるレンダリングモードの後方互換モードへの自動切り替えと重なり、大きな問題となっていました。そこで、Internet Explorer 6 では text-alignプロパティで横幅の指定されたブロックレベル要素（display:block;の状態の要素）の左右中央揃えが反映されるバグを利用して、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>

これによりバグを抱える Internet Explorer 6 はもちろん、そのほかの主要ブラウザにおいても横幅の指定されたブロックレベル要素（display:block;の状態の要素）自身の中央揃えが CSS による代替指定のみでカバーすることができます。しかし、これでは正常に左右のマージンを算出する UA では中央揃えの対象となる要素の親要素に指定されている "text-align : center ;" の指定でインラインの内容までもが一緒に中央揃えにされてしまいます。そこで、中央揃えの対象となるブロックレベル要素（display:block;の状態の要素）には行内の左右揃えを指定する 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>

このように、まず中央揃えの対象となる横幅の指定されたブロックレベル要素（display:block;の状態の要素）の親要素に対して、バグを抱えている Internet Explorer 6 用の中央揃えの指定を行い、次に中央揃えで表示させたいブロックレベル要素自体には CSS の仕様における正しい実装をした UA 用に左右に等分のマージンを算出させ、Internet Explorer 6 用に使っていた行内の内容の揃え方も、使用する言語の書字方向にあわせて再定義しなおすといった流れでブロックレベル要素（display:block;の状態の要素）の中央揃えを実現することになっていました。

むろん、現在では、このような冗長な指定は不要であり、左右のマージンに "auto" の値が指定されているだけでOKです。

<table style="margin-left : auto ; margin-right : auto ;"
border="1"><tr><td>ボックス中央揃え
</td></tr></table>

CSS によるブロックレベル要素の右揃え

横幅の指定されたブロックレベル要素（display:block;の状態の要素）を右揃えする場合も同様の手法です。Internet Explorer 6 用に、まず親要素に "text-align : right ;" を指定し、そして正しい実装をした UA 用に右揃えにしたい要素に "margin-left : auto ; margin-right : 0 ;" を指定することで、右揃えの対象となる要素の左側にボックスを右揃えにするマージンが自動で算出されます。最後に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>

こちらも現在では、このような冗長な指定は不要であり、左のマージンに "auto"、右のマージンに "0" の値が指定されているだけでOKです。

<table style="margin-left : auto ; margin-right : 0 ;"
border="1"><tr><td>ボックスの右揃え
</td></tr></table>

また、日本語の場合は、書字方向が左から右なのでデフォルトの状態で左揃えのため関係ありませんが、使用している環境の初期設定言語の書字方向や文書に設定されているデフォルト言語が右から左のヘブライ語やアラビア語、ペルシャ語などの場合であれば、上記の指定の左右方向を入れ替えるだけで、ブロックレベル要素（display:block;の状態の要素）の左揃えも使用する言語の書字方向に適した行内の内容の揃えが可能になります。

ブラウザのバグに振り回されないこと

Internet Explorer 6 のバグも次期バージョンの Internet Explorer 7 では改善されています。仕様通りの "margin-left : auto ; margin-right : auto ;" や "margin-left : auto ; margin-right : 0 ;" の指定だけで横幅の指定されたブロックレベル要素（display:block;の状態の要素）の左右中央揃えは可能です。わざわざ Internet Explorer 6 用に無意味に div要素を追加したりする必要はありません。(X)HTML は構造化言語なのですから、このような水平方向の表示位置を指定するためだけの div要素は、(X)HTML で直接表示指定しているのと何ら変わらないので、無意味です。そう言った意味でも、こういったブラウザのバグの類は、あくまでも一時的なものでしかないのですから、振り回されないことが一番です。