IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。
元のコード
HTML|
1 2 3 |
<div class="flexBox"> <p>テキストを上下中央寄せにしたい</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
.flexBox { display: flex; align-items: center; justify-content: center; padding: 15px; color: #FFF; background-color: #42B0B9; min-height: 150px; } |
DEMO
これを参考に修正していきます。
解決方法
解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。が、flex要素をさらにflex要素で囲むと解決します。
修正したコード
HTML|
1 2 3 4 5 |
<div class="flexWrap"> <div class="flexBox"> <p>テキストを上下中央寄せにしたい</p> </div> </div> |
CSS
|
1 2 3 |
.flexWrap{ display: flex; } |
flexWrapを追加して、そこにdisplay: flex;を指定しました。
これで解決します。
あまりIE以外で無駄にflexを付けたくない、という場合はIEハックを付けましょう。
|
1 2 3 4 5 |
@media all and (-ms-high-contrast: none) { .flexWrap{ display: flex; } } |
DEMO
はやくIEに悩まされないようになりたいですね…
それでは
