はじめに

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

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

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

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

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

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

index.html

<div class="contents">
  <button type="button" class="button">buttonタグ</button>
  <a href="#" class="button">aタグ</a>
</div>

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

style.css

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

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

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

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

style.css

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

こうしたれ…！

よし！いい感じですね。

じゃあIEで確n…

～END～

原因

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

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

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

どうしたものか…

解決策（なのか？）

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

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

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

css.style.css

.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;を当てれば中央揃えになってくれるのかは分からないです。。
もっと根本的なところを理解しないとわからないのかな～と思いつつ、~~めんどくｓ~~なかなか手を付けられずにいます。