<div align="center">を使わずにCSSだけでセンター表示する方法？

現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか？ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか？

よろしくお願いします。

No.2 ベストアンサー 回答者： pingu98 回答日時： 2005/07/03 01:21

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。

今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
<div style="width:100px; text-align:center;">まんなかです</div>

それと、注意したいのは、一行目の文頭に<!DOCTYPE～>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も（ますます）変になりますのでご注意を。

こんな感じで。

No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

この回答へのお礼

pingu98さん有難うございます。

><div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

私ははじめて知りました。有難うございます。

＞それと、注意したいのは、一行目の文頭に<!DOCTYPE～>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も（ますます）変になりますのでご注意を。

やはりDOCTYPEはきちんと記載しなければいけないのですね。

＞No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

私も参考にさせていただきました。

お礼日時：2005/07/03 12:04

No.3 回答者： ao_ 回答日時： 2005/07/04 13:07

No.2の方の言う通りmarginの左右にautoを設定するとその親要素に対してセンターになります。

ただし、IE5.5やIE5ではautoが対応になっていないので、autoを設定したdiv自体にtext-align:leftを付け加え、さらにその親要素にtext-align:centerを設定すれば完璧です。

この回答へのお礼

ao_さん有難うございます。

>ただし、IE5.5やIE5ではautoが対応になっていないので、autoを設定したdiv自体にtext-align:leftを付け加え、さらにその親要素にtext-align:centerを設定すれば完璧です。

なるほど、バージョンによって対応状況がかなり違うんですね。

何かキチンとした基準が全てのブラウザに統一して適用できないものなのでしょうか・・・？

お礼日時：2005/07/06 10:50

No.1 回答者： SpiceGirl 回答日時： 2005/07/02 11:42

具体的にソースが無いのでなんともですが

一応参考として

ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0004.h …

参考URL：http://www.mozilla.gr.jp/standards/webtips0004.h …

この回答へのお礼

SpiceGirlさん、大変参考になるURLを有難うございます。

左右のマージンを0pxにすることで対応が出来ました！

お礼日時：2005/07/03 12:01