Edited at

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;
}