はじめに

前回の記事同様IEに苦しめられた内容を備忘録として残していきます！

ということで今回は「ボタンのレイアウトが崩れる編」です。
ボタンの中身の文言をただただ中央に表示したいだけなのに…！

もし他にステキな解決法があれば是非教えてください！！
では！早速！

ボタンのレイアウトが崩れるんじゃ…

やりたかったことしては、文字が中央に配置されているような、シンプルにボタンを実装したかっただけです。
（こんなに詰むことになろうとは…）

そんな難しいことではないので以下のような感じで実装しました。

<divclass="contents"><buttontype="button"class="button">buttonタグ</button><ahref="#"class="button">aタグ</a></div>

（contentsについては今は特に気にしないでください。）

.button{display:block;width:100%;min-height:40px;padding:01rem;color:#FFF;text-align:center;background-color:#4682b4;box-shadow:05px5px5pxrgba(0,0,0,0.1);border-radius:20px;}

button要素に関しては特に問題なく、理想どおりに表示できます。

それにプラスして、今回はa要素もボタンのように見せたかったのでaタグにも同じようなスタイルを当てます。

あーa要素だとうまく中央に配置されないな…
それじゃあ…

.button{display:flex;justify-content:center;align-items:center;width:100%;min-height:40px;padding:01rem;color:#FFF;text-align:center;text-decoration:none;background-color:#4682b4;box-shadow:05px5px5pxrgba(0,0,0,0.1);border-radius:20px;}

こうしたれ…！

よし！いい感じですね。

じゃあIEで確n…

～END～

原因

またまた素晴らしい記事を見つけました。
IEでflex「align-items」が効かないときの対処法

まさにその通りでmin-heightを使っているのが原因のようでした。
またお前か…
高さをしっかり固定してやらないといけないってことでしょうか…

ただここで問題が。
想定されるボタンのパターンとして、ボタン内の文言が複数行になるパターンがあり、
高さを固定してしまうと、文字がボタンの枠を突き抜けてしまう可能性があります。

どうしたものか…

解決策（なのか？）

色々試行錯誤していたところ、あることに気が付きました。

「あれ？ちゃんと中央揃えになってるボタンもあるゾ…？何故？」

違いを確認してみると、親要素にdisplay:flex;とflex-direction: column;が当たってる事に気が付きました。
一度試してみます。

.contents{/* --追加-- */display:flex;flex-direction:column;/* ------- */width:300px;height:auto;background-color:#FFF;margin:1rem;padding:1rem;}

スタイルを当ててやると、

IEでもうまく中央に表示してくれました。

まとめ

これといった原因がわからないのですが…
おそらく色々な要因が重なってるような気がします。
a要素をボタンのように見せたいが為に、display: flex;をあてて中央に揃えていますが、
そもそもbutton要素であれば、display: flex;をあてなくても、text-align: center;などで中央に寄ってくれます。
そして正直なところ、なぜ親要素にdisplay: flex;とflex-direction: column;を当てれば中央揃えになってくれるのかは分からないです。。
もっと根本的なところを理解しないとわからないのかな～と思いつつ、めんどくｓなかなか手を付けられずにいます。