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

質問

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

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

よろしくお願いします。

回答No.2

pingu98 · ベストアンサー

まぁ、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の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

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

回答No.3

ao_

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を設定すれば完璧です。

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

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

回答No.1

SpiceGirl

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

一応参考として

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

参考URL：

http://www.mozilla.gr.jp/standards/webtips0004.html

お礼

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

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