Flexbox funktioniert nicht bei Schaltflächen- oder Feldgruppenelementen

Ich versuche, innere Elemente eines @ zu zentrier<button> -tag mit flexbox'sjustify-content: center. Safari zentriert sie jedoch nicht. Ich kann den gleichen Stil auf alle anderen Tags anwenden und es funktioniert wie beabsichtigt (siehe<p>-Etikett). Nur die Schaltfläche ist linksbündig ausgerichtet.

Versuchen Sie Firefox oder Chrome und Sie können den Unterschied sehen.

Gibt es einen Benutzeragentenstil, den ich überschreiben muss? Oder eine andere Lösung für dieses Problem?

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>

nd eine Jsfiddle:http: //jsfiddle.net/z3sfwtn2/2

Antworten auf die Frage(4)

Ihre Antwort auf die Frage