MacIE5.1.4 (MacOSX) で見る限り、あるブロックレベル要素を float:left
/ float:right
とすると、 text-align:center
だけが効かなくなりますやね( text-align:left
/ text-align:right
は効く)。 CSS 解釈バグですねコリャ。これは、 float されたブロックの直接の子要素に、何のインライン要素にも内包されてない生の文字列(匿名インラインボックス)がある場合に起きるみたい。
下の例は <p>TEXT</p>
というマークアップに p { float:left }
を指定。順に text-align:left
/ text-align:center
/ text-align:right
にしてます。
TEXT
TEXT
TEXT
ところが、直接子要素が何がしかのインライン要素のみで構成されてて、匿名インラインボックスの無い場合は、text-align:center
が正常に効く。なんだこりゃ。
下の例は、p { float:left; text-align:center }
して、 <p><span>TEXT</span></p>
としてます。
TEXT
ブロック系要素を子要素に持てるブロック要素に text-align:center
なブロック要素を入れ、親要素で float 指定したばあいも正常に効く。まぁこれは当然のハナシ。
下の例は、div { float:left } p { text-align:center }
して、 <div><p>TEXT</p></div>
としてます。
TEXT