外部スタイルシートで段落の行揃えと幅とを指定する

Question

divを外部cssでスタイル指定し、
すべてのファイルの段落を中央揃え・背景色白にしています。
div { 
  text-align: center;
　background-color: #FFFFFF;
 } 

これに以下のように幅指定を加えたところ、
  width: 400px;
中央揃えが反映されなくなりました。
(IE6.0、NN7.0　WindowsXP)

行揃えと幅とを同時に指定し、反映させるにはどのように記述すればよいでしょうか。
よろしくお願いします。

lead1976 · Accepted Answer

中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。
それでしたら、divのボックス自体がセンタリングの指定をされていないので、これまでは表示領域に100%の幅で領域を確保していたdivが、幅を400pxに制限されたために、表示領域の左端を基準として幅400pxのボックスになり、その中で文字がセンタリングされている状態になっているのではないでしょうか。
試しに、bodyに対してbackground-color: black;の指定を入れて背景を黒くすると、div要素が確保している領域の背景が白色なので、確保されている領域が把握できると思います。
なお、div要素に対するwidth指定は可能ですし、有効な指定です。

とりあえず改善策としては、#2の方の挙げられているように、bodyにtext-align: centerを適用させ、それに加えてdivのスタイルシート指定にmargin: auto;を追加すればよいと思います。
従来のIEやIE6の後方互換モードでは、div要素などブロックレベル要素をセンタリングするには、その親要素でtext-align: center;を指定する必要があります。 そのため、body要素に対してtext-align: center;の指定が必要になります。 ただし、W3Cが勧告しているスタイルシートの正しい解釈としては、text-alignはブロックレベル要素には適用されませんので、IE以外のブラウザでは上記のtext-alignの指定はブロックレベル要素に効きません。
正しい解釈に近い表示法を取るブラウザ(Netscape7やIE6の標準モード)で、ブロックレベル要素をセンタリングする時には、margin: auto;を使います。 これをdiv要素のスタイルに追加すればよいでしょう。
蛇足気味ですが、margin: auto;という指定は、上下左右のマージンを自動設定するスタイルシート指定になります。 もしmargin-left: auto;という指定だけを行うと、横幅の余白領域がすべて自動的に左側のマージンに割り振られ、結果的にそのブロックレベル要素は右寄せになります。 margin-right: auto;のみの場合は、同様に余白領域がすべて自動的に右側のマージンになり、結果的に左寄せになります。 両方をautoに設定すれば、余白領域を左右で自動的に分け合い、結果的に中央寄せになります。
従来のIEと、Netscapeでの表示の共通性を確保するのであれば、この両方を追加すると良いでしょう。

参考になれば。 見当違いでしたら、ごめんなさい。

Bo_Bo · Answer

私の環境（IE6, Opera7.23）では、指定した設定が問題なく反映されますがどうしたもんでしょうね！？もしかして、DIVブロックそのものを中央揃えにしたいのならば、対象となる DIVブロックの外側に中央揃えを設定しないといけません。　　：

外側

DIVブロックの中身

外側

heto2 · Answer

Div では Width を指定できないと思います。 Tableを使ってみるのはどうでしょう。ブラウザーの表示幅に関係なく指定した幅で表示できるのでデザインが崩れません。外部cssで例えば下記のように定義 .sample01{ font-size:x-small; font-weight:bold; background:url(xxxx.jpg); text-align:center; } HTMLでは

サンプル1

background:url(xxxx.jpg);では任意の画像を背景に使えます。背景色指定の場合は次のようにします。外部css .sample02{ font-size:x-small; font-weight:bold; background-color : #00ffff; text-align:center; } HTML

サンプル２

ちょっとご質問から離れているかもしれませんが、色々楽しめます。

外部スタイルシートで段落の行揃えと幅とを指定する

中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。

私の環境（IE6, Opera7.23）では、指定した設定が問題なく反映されますが

Div では Width を指定できないと思います。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング