Flexbox arbeitet nicht an Button- oder Fieldset-Elementen - html, css, css3, safari, flexbox

Ich versuche, innere Elemente eines zu zentrieren <button>-Tag mit Flexbox "s justify-content: center. Aber Safari zentriert sie nicht. Ich kann den gleichen Stil auf alle anderen Tags anwenden und es funktioniert wie vorgesehen (siehe <p>-Etikett). Nur die Schaltfläche ist linksbündig.

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

Gibt es einen User-Agent-Stil, den ich überschreiben muss? Oder irgendeine 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>

Und ein Kinderspiel: http://jsfiddle.net/z3sfwtn2/2/

Antworten:

Das Problem ist, dass die <button> Element ist nicht als Flex- (oder Gitter-) Container konzipiert.

Zum Zeitpunkt der Erstellung dieses Artikels halten sich Webkit-basierte Browser (Chrome und Safari) an dieses Designprinzip. Firefox und Edge nicht. Ich habe andere Browser nicht getestet.

Daher sollten Sie kein Problem damit haben <button> Ein Flex- (oder Gitter-) Container in Firefox und Edge. Aber erwarte nicht, dass es in Chrome oder Safari funktioniert.

Dieses Verhalten gilt derzeit für mindestens drei Elemente:

• <button>
• <fieldset>
• <legend>

Ich theoretisiere zwar, aber ich glaube, dass die Idee darin besteht, einen gesunden Menschenverstand bei der Gestaltung von HTML-Elementen beizubehalten. Zum Beispiel wollten die HTML-Götter verhindern, dass Autoren eine Schaltfläche in eine Tabelle verwandeln.

Aber zumindest in diesem Fall gibt es a einfache und einfache Problemumgehung:

Wickeln Sie den Inhalt der button in einem spanund mach das span der Flexbehälter.

Angepasstes HTML (umhüllt button Inhalt in a span)

<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>

Angepasstes CSS (zielgerichtet span)

button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}

Überarbeitete Demo

HINWEIS: Obwohl sie keine Flex-Container sein können, button Elemente können Flex-Elemente sein.

Verweise:

• Bug 984869 - display: flex funktioniert nicht für Button-Elemente
• Bug 1176786 - Flexbox auf a blockiert den Inhalt, stellt aber keinen Flex-Formatierungskontext her
• Fehler # 10 - Einige HTML-Elemente können keine Gittercontainer sein

Hier ist mein einfacher Hack.

button::before,
button::after {
content: "";
flex: 1 0 auto;
}