- ベストアンサー
CSSでセンタリングしたい
こんにちは 現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。 今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。 ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。 text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
そうですね。皆さんが言われるように、IEのバージョン(古いバージョン)によっては、 margin:0px auto; だけではセンタリングしない事は経験済みです。よって <body> <div style="text-align:center"> <div style="width:600px; margin:0px auto;">内容</div> </div> </body> でいかがですか。
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
> あの大企業のソニーでさえ text-align: center を使用しているのですか > だめですよね? なぜ「だめ」と判断されるのでしょうか。 IEではスタイルシートの反映にバグがあり、ブロック要素のセンタリングで、左右marginでの反映がされないため、text-alignが使われます。 text-alignはスタイルシートプロパティであり、非推奨といわれる「属性」ではないですから、使用になんら問題はありません。 ま、ブロック要素のセンタリングにtext-alignを使いたくないというのであれば、doctype宣言で標準モードを選べば、使わずに済みます。
- Muller3
- ベストアンサー率81% (800/979)
sonyサイトのHTMLソースとスタイルシートは見てみましたか？ <body> <div class="contents" id="contents"> <div id="wrapper">… スタイルシート #wrapper { width: 760px; text-align: left; margin:20px auto 0 auto; ←この部分がセンタリング指示 } センタリングしたい要素にmargin: 0 auto;を指定します。 bodyにあるtext-align: center; は、IE6のバグによりmargin:0 auto; でのセンタリングができないので、敢えて使われているものです。
- IsakAjimaf
- ベストアンサー率58% (46/78)
例示してあるソニーのサイトが使っているＣＳＳを確認しましたが、 body ブロック内に text-align:center を記載していました。 http://www.sony.co.jp/top/2006/css/index.css ＣＳＳのアドレス確認については、例示されたサイトのソースと ここに挙げたアドレスを見比べて探してみてください。 私が今までに見たＣＳＳの例でも、ＣＳＳの最初に全体の設定を記述し、 部分的に変えたいところをＩＤやＣＬＡＳＳで指定するのが メンテナンス時にわかりやすくて良いと思います。
お礼
あの大企業のソニーでさえ text-align: center を使用しているのですか 予想していませんでした。(^_^;) だめですよね?ちゃんとしたCSSで中央配置をご存知でしたら ご回答お願いします。 ありがとうございました。
お礼
ご回答ありがとうございます。 Internet Explorerにはバグがあるんですね。 標準モードにするには HTML 4.01 Strictで切り替えられるようですね。