Skip to content

Safari では button 要素の display: flex; が効かない

a タグや button タグにスタイルをあてて、見た目をそろえたいときがあると思います。

このとき、display プロパティの値を指定すると思うのですが、ボタンの中のテキストや記号を上下左右センターに配置するのに display: flex; を指定してしまうと、Safari などのいくつかのブラウザでテキストがセンター寄せにならず左寄せになってしまいます。

原因と対策を探ってみたので、紹介します。

問題のコードと環境

私の場合、次のようなコードを書いたときにこの現象に遭遇しました。

display: flex; を指定して、テキストを中央寄せにしようとしています。

自分の環境で確認したところ、以下のような結果になりました。

狙い通りテキストを中央寄せにできたものは○、できなかったものには×をつけています。

  • Windows 10 – Chrome : ○
  • Windows 10 – Firefox : ○
  • Windows 10 – Edge : ○
  • Windows 10 – IE : ○
  • macOS 10 – Chrome : ○
  • macOS 10 – Safari : ×
  • Android 7 – Chrome : ○
  • iOS 10 – Chrome : ×
  • iOS 10 – Safari : ×

以前は Firefox や IE も上手くいかなかったみたいなのですが、私が確認したタイミングでは期待通りの挙動をしていました。

問題の原因

display: flex; による中央寄せが効かなかった原因ですが、button を Flex Container に指定したことによるものなのか、button 内の Flex Item がテキストノードであることによるものなのか分からなかったので、調べてみました。

display: block; を指定

See the Pen Button – Display Block by okaka (@okaka) on CodePen.light

まず、デフォルトの display 値を書き換えること自体が問題を起こしている可能性があるので、span, div, button それぞれの display 値に ‘block’ を指定してみたところ、全てのブラウザで期待どおりに表示されました。

テキストの位置が div, span は左寄せ、button は中央寄せになっていますが、button に対して display: block; を指定すること自体は問題なくできているように見えます。

display: flex; を指定

display: block; は問題なかったので、次は display: flex; の挙動を確認してみます。span, div, button に display: flex; justify-content: center; align-items: center; のスタイルを指定しました。Flex Container の子要素のテキストノードは Flex item としてふるまうので、テキストが中央寄せになることが期待されます。

See the Pen Button – Display Flex – text by okaka (@okaka) on CodePen.light

Chrome などでは期待通り、div, span, button 全てにおいてテキストが中央寄せで表示されました。ところが Safari ではそうはならず、div, span は中央寄せ、button は左寄せで表示されてしまいました。

Flex Item を HTMLタグで囲む

先ほどのサンプルでは、Safari で期待した表示になりませんでしたが、これが button を Flex Container に指定したことによるものなのか、button 内の Flex Item がテキストノードであることによるものなのか確認するため、button 内の要素を HTML エレメントにしてみました。

See the Pen Button – Display Flex – element by okaka (@okaka) on CodePen.light

この場合も、Safari では div, span が中央寄せ、button は左寄せで表示されました。button 内の Flex Item が何であれこの現象は起こるようなので、どうやら button を Flex Container に指定したことが原因のようです。

結論と解決法

いくつか検証してみましたが、結論としては、Safari など一部のブラウザでは、button 要素に display: flex; を指定すると期待通りの挙動にならない、と言えるでしょう。

PC 向けサイトであれ、スマホ向けサイトであれ、a 要素と button 要素を同じ見た目にするときに display: flex; を指定するのは難しそうです。display: block; や display: inline-block; を使うのがいいでしょう。

display: flex; がどうしても必要な場合には、button 要素の display に “block” や “inline-block”を指定し、button 要素の子要素に display: flex; を指定することで一応実装可能です。

これらの実装サンプルは下のようになります。

See the Pen Button – Solution by okaka (@okaka) on CodePen.light

Comments are closed.