HOME > ブラウザ違い・バージョン違いによるズレ等の解決方法 > 中央寄せのレイアウトなのにバージョンによって中心に寄らない

中央寄せのレイアウトなのにバージョンによって中心に寄らない

ブラウザの真ん中寄せのレイアウトのはずなんだけど・・・旧バージョンのIEで見ると左に寄ってる！

このように中央寄せするはずが・・・
ブラウザの真ん中寄せのレイアウトのはずなんだけど・・・旧バージョンのIEで見ると左に寄ってる！

左に寄ってしまう
旧バージョンのIEで見ると左に寄ってる！

原因　CSSの設定ミス

margin: 0px auto;　という設定での中央寄せが旧バージョンのブラウザでは適用されない。

旧バージョン用にページ全体を text-align: center で中央寄せにしておく。
※そうするとブロックの中身のテキストも中央寄せになるので、ブロックの中身の文字の整列は調整する。

これだけだと中央に寄らない

div.mannaka {
margin: 0px auto;
}

こう変更すると旧バージョンでも中央寄せになる

<div style="text-align:center;">
<div class="mannaka"></div>
</div>

div.mannaka {
margin: 0px auto;
text-align: left;
}

もしこの記事が役に立ちましたら、ぜひブックマークやブログ・twitterで紹介して下さい。