Help us understand the problem. What is going on with this article?

IEでmargin:autoが効かない(センターに寄らない)

More than 3 years have passed since last update.

詰まったのでメモ。
どこ調べてもtext-align:centerのこと言われますが、
自分はそれでは治りませんでした。。

1.不具合内容

IEで表示したときだけ一部の要素が真ん中に寄らない。

header
main
footer

とあって、mainだけ中央に寄らない。

1-1.IEのバージョン

2つで試しました。

OS IE version Result
Windows8.1 11.0.9600 中央に寄らない
Windows10 Edge     中央に寄る

1-2.ページの構造(html)

index.html
<header>
  <div class="center">
  </div>
  <nav class="center">
  </nav>
</header>
<main class="center">
  <!--  ★この領域がセンターに寄らない  -->
</main>
<footer>
  <div class="center">
  </div>
</footer>

1-3.ページの構造(css)

style.css
.center {
    width: 960px;
    margin:0px auto;
}

2.原因

bodyタグ内の1階層目には margin:0px auto; センター寄せができないみたい。
ちなみに text-align:center も効きませんでした。

3.対策

単純に2階層目にズラしました。

index.html
<header>
  <div class="center">
  </div>
  <nav class="center">
  </nav>
</header>
<main>
  <div class="center">
  <!--  ★header, footerのようにセンターに寄る!!  -->
  </div>
</main>
<footer>
  <div class="center">
  </div>
</footer>

4.原因

わからない(笑)

有識者の方々にコメントいただき、判明しました。
(myakura@githubさん、tsuyoshi_choさん、ありがとうございます!)

myakura@github さんより

IEでは「mainという名前のついた見知らぬ要素」として扱われています。
で、こうした要素のスタイルはdisplay: inlineとして扱われるので、
margin: 0 autoによるセンタリングがききません。

さらにtsuyosh_choさんより

コメントいただいていた別の方のIE向け別対策でも取り上げられていましたが、
IE11では、mainにブロック要素を指定しないと
デザインが崩れてしまうケースがあるみたいです。

Web屋さんは大変だなと痛感しました…
というわけで、別対策をば。

x.追記:別対策

別の対策がありました。

このmain要素に display:block; とするだけで解決です。
(本当はIE11にだけ適応するのがベストだと思います)

style.css
.center {
    width: 960px;
    margin:0px auto;
}

/* ★追加 */
main {
    display:block;
}
SYABU555
GooglePlayにてアプリを公開中。 日々の技術的なことはこちらに残すそうかと画策中。 ■オートマナー https://play.google.com/store/apps/details?id=jp.chau2chaun2.mannerstimer ■QuickSleep https://play.google.com/store/apps/details?id=jp.ch
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした