min-heightとalign-items centerの組み合わせがIE11で効かない

flexboxのalign-items: centerとmin-heightを組み合わせて設定した際、IE11でだけ上下中央位置にならないことがあったので、対応方法をメモ。

サンプルコード

まずは対応前のサンプルです。

<a class="c-btn" href="">ボタン</a>

ボタンの高さをmin-height:で可変にして、複数行になった場合に高さが伸びるようにしています。

.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 45px;
}

これでchromeなどは意図した表示になったのですが、IE11だけalign-items: centerが効かずテキストが上寄りになっていました。
対応前のデモページ

min-heightとalign-itemsの組み合わせに問題があるようで、min-heightをheightにするとIEでも意図した表示になりました。

.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 45px;
}

対応後のデモページ1

高さを固定にして問題ない場合はこの対応でよいのですが、今回はテキストが複数行の場合に高さが伸びるようにしたかったので別の方法も検討してみました。
いくつか試した結果、ボタンのラッパー要素を追加して、その要素にdisplay: flexを指定する形でも解消できるようでした。

<div class="c-btn-wrapper">
	<a class="c-btn" href="">ボタン</a>
</div>
.c-btn-wrapper {
	display: flex;
}
.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 45px;
}

対応後のデモページ2

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年7月
 123
45678910
11121314151617
18192021222324
25262728293031