Safari では button 要素の display: flex; が効かない – おかかウェブa タグや button タグにスタイルをあてて、見た目をそろえたいときがあると思います。 このとき、display プロパティの値を指定すると思うのですが、ボタンの中のテキストや記号を上下左右センターに配置するのに display: flex; を指定してしまうと、Safari などのいくつかのブラウザでテキストがセンター寄せにならず左寄せになってしまいます。 原因と対策を探ってみたので、紹介します。 問題のコードと環境 私の場合、次のようなコードを書いたときにこの現象に遭遇しました。 display: flex; を指定して、テキストを中央寄せにしようとしています。 <button class=”button”>送信</button> <style> .button { box-sizing: border-box; width: 100%; padding: 20px; displa
