WebEtc > HtmlAndCss

HTML / CSS

テーブルやdiv要素などにCSSのtext-alignは使用できない。

• テーブルやdiv要素などはブロックレベル要素といわれるが、text-alignプロパティはインライン要素の位置揃えを指定するためのもの。
• CSSのtext-alignでセンタリングなどの位置揃えはできないのだが、Windows版IEではバグで位置揃えができてしまう。
  • ただし、IE6の標準準拠モードではこのバグは修正されている

ブロックレベル要素に対するCSSによる正しいセンタリング方法

• センタリングしたい要素の左右のマージンをautoにし、ブロックレベル要素に幅を指定する。以下は記述例。（Web標準普及プロジェクトから抜粋）

<div>
    <div style="margin-left:auto;margin-right:auto;width:10em;">
        ブロックレベル要素
    </div>
</div>

• 上記のように正しいCSSによるセンタリングを行った場合、Windows版IEでは（バグにより）逆にセンタリングされない。これを回避するかつIE以外でのブラウザでも正しくセンタリングさせるために、「text-align:center;」も同時に指定してやる。

<div style="text-align:center;">
    <div style="margin-left:auto;margin-right:auto;width:10em;">
        ブロックレベル要素
    </div>
</div>

• ・・・しかし、上記２パターンの結果をFirefox（5.0.1）で試したところ、「ブロックレベル要素」という表示が若干横にずれる。原因不明。

参考サイト

• Web標準普及プロジェクト - ブロックレベル要素をセンタリングする方法