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

IE11でjusty-content: centerしてるのに両端中央揃えできない時の原因

More than 3 years have passed since last update.

すごいハマったのでメモ。

IE11はflexに対応しているので不具合無いだろう...と考えてガンガンつかっていいった結果、見事につまづきました。

事の発端

簡単な例ですが、↓のようにflexを使用してたら、.childが右揃えになりました。

<div class="container">
  <div class="child">いんたーねっとえくすぷろーらー</div>
</div>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 400px;
    height: 80px;
}

.child {
    margin: 0 auto;
    width: 200px;
    height: 20px;
}

align-itemは効いているし、ググっても関連したものが出ず...
caniuseにもそれらしい文献は見当たらず...
とりあえず適当にCSSを削っていったところ、治った&原因判明。

原因

.childmargin: 0 autoの部分がダメだったようです。

参考文献
https://msdn.microsoft.com/ja-jp/library/jj127304(v=vs.85).aspx#start
↑の文献のcenterの項目に「余白の指定はなんか変なことなるよ」的な文章が書いてあったので、試しにmargin: 0にしたところ、綺麗に左右中央揃えしました。

nyawach
not まとめ but 備忘録な投稿を書いています。
https://hyme.site
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.com
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
ユーザーは見つかりませんでした