- ベストアンサー
外部スタイルシートで段落の行揃えと幅とを指定する
divを外部cssでスタイル指定し、 すべてのファイルの段落を中央揃え・背景色白にしています。 div { text-align: center; background-color: #FFFFFF; } これに以下のように幅指定を加えたところ、 width: 400px; 中央揃えが反映されなくなりました。 (IE6.0、NN7.0 WindowsXP) 行揃えと幅とを同時に指定し、反映させるにはどのように記述すればよいでしょうか。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。 それでしたら、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での表示の共通性を確保するのであれば、この両方を追加すると良いでしょう。 参考になれば。 見当違いでしたら、ごめんなさい。
その他の回答 (2)
- Bo_Bo
- ベストアンサー率65% (97/149)
私の環境（IE6, Opera7.23）では、指定した設定が問題なく反映されますが どうしたもんでしょうね！？ もしかして、DIVブロックそのものを中央揃えにしたいのならば、対象となる DIVブロックの外側に中央揃えを設定しないといけません。 <style type="text/css"> <!-- body { text-align: center; } div { width: 400px; text-align: center; background-color: #ffffff; } --> </style> ： <body> <p>外側</p> <div> DIVブロックの中身 </div> <p>外側</p> </body> </html>
お礼
bodyタグにtext-align: center;を設定したところ、うちのIEでも反映されました！ そうか、divの外側でなければならなかったのですね。 しかし、NN7では反映されませんでした。 IEとNN、どちらにもいい顔するのは本当に難しい・・・。 たいへんためになるご指摘をいただきました。 本当にありがとうございます。
- heto2
- ベストアンサー率43% (227/525)
Div では Width を指定できないと思います。 Tableを使ってみるのはどうでしょう。 ブラウザーの表示幅に関係なく指定した幅で表示できるのでデザインが崩れません。 外部cssで例えば下記のように定義 .sample01{ font-size:x-small; font-weight:bold; background:url(xxxx.jpg); text-align:center; } HTMLでは <table align=center class="sample01" width="700" border="0"> <tr><td>サンプル1</td></tr> </table> background:url(xxxx.jpg);では任意の画像を背景に使えます。 背景色指定の場合は次のようにします。 外部css .sample02{ font-size:x-small; font-weight:bold; background-color : #00ffff; text-align:center; } HTML <table align=center class="sample02" width="700" border="0"> <tr><td>サンプル２</td></tr> </table> ちょっとご質問から離れているかもしれませんが、色々楽しめます。
お礼
なるほど、いろいろと楽しめますね。 既存のファイルひとつひとつにテーブルを追加していくのはちょっぴり大変ですが、レイアウトにテーブルを活用するのは便利で手軽にできてよいですね。 ご丁寧なアドバイスありがとうございます。
お礼
bodyにtext-ailgn:center;とmargin: auto;を併記してみたところ、(うちの)IE6とNetscape7とともに希望どおりのレイアウトになりました。 どっちのブラウザにもいい顔をしたかったので、大変助かりました。 見当違いなんてとんでもない。 非常に詳しく解りやすく、また大変的を射たご説明でした。 本当にありがとうございます。