2012.03.12
css

IEで中央寄せがうまくいかない

IEだけでCSSで指定した中央寄せが反映されないときの対処法。

通常、中央に持っていきたいときは該当する部分に下記のように記述すれば問題ないはずです。

margin-left:auto;
margin-right:auto;

少なくともFireFoxやChromeでは問題ないのですが、IEではときどきうまくいかないようです・・・。

marginをautoで指定していしてもダメなとき。

中央寄せしたい部分に、text-align:center;を加えると解決しました。

例えば…

#content {
width:800px;
margin-left:auto;
margin-right:auto;
}

としている部分がIEで中央寄せになってない場合。

#content {
width:800px;
margin-left:auto;
margin-right:auto;
text-align: center;
}

とすると中央寄せになるということです。

しかもbodyタグに直接text-align: center;を指定しても大丈夫とのこと。

body {
text-align: center;
}

文字まで中央寄せになってしまうので、文字を使わないdiv要素をtext-align: center;で作り、その子要素にtext-align: left;を指定すると良いですね。

CSS

#content {
width:800px;
margin-left:auto;
margin-right:auto;
text-align: center;
background:#F7AABB; /*わかりやすいように背景に色をつけてみる*/
}
#content_in {
text-align: left;
}

HTML

<div id="content">
   <div id="content_in">テキストが左寄せになる。</div>
</div>

上記のように記述することで文字まで中央寄せになってしまうのが防げると思います。

中央寄せ

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP