4-2.中央寄せ

第4章　スタイルシートの注意点

中央寄せについては、現在、内容を書き換え中です。（99.7.21～）
だいぶ、書き換えができてきたように思いますが。。（99.8.2）

HTMLファイルを作成する上で、中央寄せを表現したい場面はいっぱいあります。中央寄せは、次のようなスタイルシート定義になります。

セレクタ  { text-align: center; }

実際に中央寄せをしたい場面は、どんなものがあるでしょうか。テキストの中央寄せ、画像の中央寄せ、表の中央寄せ、リストの中央寄せ、見出しぐらいでしょうか。

テキストも画像もインライン要素ですから、どちらもP要素の内容として表現することができます。

.center  { text-align: center; }

<P class="center">この文章は中央寄せです<BR>
<IMG SRC="gazou.gif" ALT="この画像は中央寄せ表示されます"></P>

Table要素も、P要素と同じように中央寄せが定義できるように思われます。が、そこが難しいところ。Table要素自身に中央寄せを定義してもNN4では効果がなく、DIV要素を使ってやらないといけません。ALIGN属性であればNN4で中央寄せできるのに、まるでここだけNN3に戻ったようです。

<DIV class="center">
<Table>
<TR><TD>この表は中央寄せになります</TD></TR>
<TR><TD class="center">このセル内容を中央寄せすることができます</TD></TR>
</Table>

DIVで複数のブロック要素を中央寄せしてみます。

<DIV class="center">
<P>中央寄せになります
<P>ここも中央寄せです。
</DIV>

*中央寄せの定義*
↓属性：ブラウザ→	IE4.0	NN4.0
<p class="center"> テキストの中央寄せ	？？	効果あり
<table class="center"> 表の中央寄せ	効果あり	×
<div class="center"> ブロック要素の中央寄せ	効果あり	効果あり

ここで、HTML4.0では、CENTER要素、Align属性ともに非推奨となっています。でも、W3Cは、新規UA（ブラウザ）の側では今後もこれら非推奨の要素・属性を有効とするよう考慮すべきだと言ってます。

結局のところ、古いブラウザでもちゃんと表示をさせ、DTD違反にならないようにするには、HTML4.0TransitionalのDTDを採用するしかないのでしょうね。