CSSブロックレベル要素をセンタリングするには

user-pic
0

Webサイトをセンター合わせのデザインにする場合、例えば

<div id="container">コンテンツ</div>

のをセンタリングする場合、スタイルシートは

#container {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
}

などとすれば、IE7、Firefox、Operaなどは問題なくセンターリングされますが、IE6ではブラウザのバグによりセンタリングされません。

そこで、IE用にDIV要素をラップし、text-align: center; を適用します。
合わせてコンテンツの入るDIV要素またはインライン要素に、text-align: left; を適用します。 

<div id="wrapper">
<div id="container">コンテンツ</div>
</div>

この場合のスタイルシートは

#wrapper {
    text-align: center;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
    text-align: left;
}


そのためだけにDIV要素をラップするのがイヤだという場合は、BODY要素にtext-align: center; を適用してもよいと思います。

関連のありそうな記事

トラックバック(0)

トラックバックURL:

コメントする

RSS

楽天おすすめ

Tag Cloud

SEO対策

Sponsor Site

Category

Archives

Amazonおすすめ

Copyright © 2008 Trendspotting All rights reserved.