CSSでセンタリングしたい

解決済

質問者：ytraet
質問日時：2007/11/25 16:44
回答数：4件

こんにちは

現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。

今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。

ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。

text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： mat-21
回答日時：2008/01/03 09:25

そうですね。

皆さんが言われるように、IEのバージョン(古いバージョン)によっては、
margin:0px auto;
だけではセンタリングしない事は経験済みです。よって

<body>
<div style="text-align:center">
<div style="width:600px; margin:0px auto;">内容</div>
</div>
</body>

でいかがですか。

- 0
- 件

通報する

No.3

回答者： goldfox
回答日時：2007/11/25 18:07

> あの大企業のソニーでさえ text-align: center を使用しているのですか

> だめですよね?
なぜ「だめ」と判断されるのでしょうか。
IEではスタイルシートの反映にバグがあり、ブロック要素のセンタリングで、左右marginでの反映がされないため、text-alignが使われます。
text-alignはスタイルシートプロパティであり、非推奨といわれる「属性」ではないですから、使用になんら問題はありません。
ま、ブロック要素のセンタリングにtext-alignを使いたくないというのであれば、doctype宣言で標準モードを選べば、使わずに済みます。

参考URL：http://www.tagindex.com/html_tag/page/doctype.html

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

Internet Explorerにはバグがあるんですね。
標準モードにするには HTML 4.01 Strictで切り替えられるようですね。

通報する

お礼日時：2007/11/25 18:38

No.2

回答者： Muller3
回答日時：2007/11/25 17:40

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;
でのセンタリングができないので、敢えて使われているものです。

- 0
- 件

通報する

No.1

回答者： IsakAjimaf
回答日時：2007/11/25 17:10

例示してあるソニーのサイトが使っているＣＳＳを確認しましたが、

body ブロック内に text-align:center を記載していました。
http://www.sony.co.jp/top/2006/css/index.css

ＣＳＳのアドレス確認については、例示されたサイトのソースと
ここに挙げたアドレスを見比べて探してみてください。

私が今までに見たＣＳＳの例でも、ＣＳＳの最初に全体の設定を記述し、
部分的に変えたいところをＩＤやＣＬＡＳＳで指定するのが
メンテナンス時にわかりやすくて良いと思います。