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; を適用してもよいと思います。
コメントする