はじめに
前回の記事同様IEに苦しめられた内容を備忘録として残していきます！
ということで今回は「ボタンのレイアウトが崩れる編」です。
ボタンの中身の文言をただただ中央に表示したいだけなのに…！
もし他にステキな解決法があれば是非教えてください！！
では！早速！
ボタンのレイアウトが崩れるんじゃ…
やりたかったことしては、文字が中央に配置されているような、シンプルにボタンを実装したかっただけです。
（こんなに詰むことになろうとは…）
そんな難しいことではないので以下のような感じで実装しました。
<div class="contents">
<button type="button" class="button">buttonタグ</button>
<a href="#" class="button">aタグ</a>
</div>
（contentsについては今は特に気にしないでください。）
.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要素だとうまく中央に配置されないな…
それじゃあ…
.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;が当たってる事に気が付きました。
一度試してみます。
.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;を当てれば中央揃えになってくれるのかは分からないです。。
もっと根本的なところを理解しないとわからないのかな～と思いつつ、めんどくｓなかなか手を付けられずにいます。