97

<button>タグの内部要素をフレックスボックスので中央に配置しようとしていjustify-content: centerます。しかし、Safari はそれらを中央に配置しません。同じスタイルを他のタグに適用でき、意図したとおりに機能します ( <p>-tag を参照)。ボタンのみ左揃えです。

Firefox または Chrome を試してみると、違いがわかります。

上書きしなければならないユーザー エージェント スタイルはありますか? または、この問題に対する他の解決策はありますか?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

そしてjsfiddle： http://jsfiddle.net/z3sfwtn2/2/

4

3 に答える 3

12

これが私の最も簡単なハックです。

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}
于 2016-11-08T09:39:22.163 に答える