CSSテクニックコミュの全体像を真ん中寄せに・・・

みなさん、お聞きしたい事があるのですが、

たとえば、下のページ
http://www.united-arrows.jp/

は、左寄せですよね。

そして、↓のページ
http://www.yahoo.co.jp/
は、真ん中よせですよね？

このように、普通にcssのコーディングして、
真ん中寄せにしたい場合はどうされますか？

私は、色々考えたあげく、
一番外側の大枠に

text align="center"で、body内をくくって
いるのですが、確かにこれでも真ん中表示に
なります。

しかし、そうすると、中の色んなボックスにまで
上のコードが聞いてしまい、文字や画像も
真ん中に寄せようとしてしまいます。

全体像だけ、真ん中にし、
各ボックスは、左寄せって出来るんでしょうか?

一応、各ボックスをtext-align="left"の
表示にしたら、左寄せになりますが、

皆さんは、真ん中表示にする場合、どうされてますか？
もしかして、凄く簡単な方法とかあるのでしょうか？
お聞きさせて頂ければと想います。

よろしくお願い申し上げます。

コメント(7)

最初
全て
最新の40件

[2] mixiユーザー 07月22日 00:01

このページをどうぞ。
http://www.mozilla.gr.jp/standards/webtips0004.html

[3] mixiユーザー 07月22日 00:01

!DOCTYPEの宣言にもよりますが、メインとなるボックスのマージンを以下のようにするのがポイントです。

margin: 0px auto;

ようは、左右のマージンをオートにするということです。
なんとなく見えてきましたか？

以降はご自分で考えてみてください。

[4] mixiユーザー 07月22日 00:08

プロの方々がどうやってるのかわかりませんが。
私はこういうコード使ってます。

----------------------------

.outer-block{
text-align:center;
}
.inner-block{
text-align: justify;
margin-right: auto;
margin-left: auto;
}

----------------------------

[5] mixiユーザー 07月22日 08:47

知っている方もいると思いますが、

margin: 0px auto;

という記述ですが、IEのバージョンによっては
適用されません。

センタリングさせたい場合は、省略せずに

margin-top:任意の値;
margin-bottom:任意の値;
margin-right: auto;
margin-left: auto;

と分けて記述したほうがいいですよ。

参照：
http://www.zspc.com/documents/css2/box/margin.html

[7] mixiユーザー 07月23日 00:49

皆さん、有り難うございます。

やはりIEのバージョンやブラウザにより、
表示の仕方が違うのですね。

凄く勉強になりました。
今後とも、宜しくです。

ログインすると、みんなのコメントがもっと見れるよ