最近はサイトをいくつかのブロックに分けてデザインするときは、テーブルを使わずにCSSのdiv要素を使うのが一般的です。ユング君のサイトでもその様にしているのですが、IEで表示すると全体が右に寄ってしまうと言う「困った状態」に悩まされていました。
一般的に、div要素を使ってブロックを作って、それを中央に持ってくるためには
width: 800px;
padding: 0px;
margin: 0px auto 0px auto;
}
みたいな感じにします。ポイントは言うまでもなく
margin: 0px auto 0px auto;
です。
こうして、左右のマージンを “auto” にすると、左右に等分のマージンが算出されることになりブロックは真ん中に配置されるようになります。
ところが、プラウザ全体の９０％を占めるIEでは、このやり方では上手くセンタリングされずに右側によってしまいます。原因はIEのバグであり、このバグはIE7になっても改善されていないようです。
これは実に困ったことで、ユング君のトップページもIEで表示すると上手くセンタリングされずに右側によってしまっていました。実に不細工なので何とかしたいと思っていたのですが、まさかその原因がIEのバグだとは夢にも思っていませんでした。
今日は休日出勤の振り替え休日だったので、ワンコを散歩させた後この問題にじっくり取り組んでみました、・・・と言っても、Googleで検索すればすぐにバグを回避させる方法は見つかりました。
やり方は、containersブロックを入れるための新しいブロックを作ってそれをセンタリングさせまなさい・・・とのことです。
text-align: center;
}
みたいな感じです。
ただし、これだけだとcontainersブロックの中のテキスト要素も全てセンタリングされてしまうので、もとのcontainersブロックに
text-align: left;
を追加します。
width: 800px;
padding: 0px;
margin: 0px auto 0px auto;
text-align: left;
}
そして、
<div id="iecenter">
<div id="containers">
これで真ん中になっただろう！！
</div>
</div>
みたいにすると、無事にブロックがセンタリングされました。
みんな頼むからIEから足を洗ってくれ！！