Flexbox non funziona su pulsanti o elementi fieldset

Question

Sto provando a centrare gli elementi interni di un <button> -tag con justify-content: center della flexbox. Ma Safari non li centra. Posso applicare lo stesso stile a qualsiasi altro tag e funziona come previsto (vedere lo <p> -tag). Solo il pulsante è allineato a sinistra.

Prova Firefox o Chrome e puoi vedere la differenza.

C'è uno stile di agente utente che devo sovrascrivere? O qualsiasi altra soluzione a questo problema?

E un jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

Answer 1

Il problema è che l'elemento <button> non può essere un contenitore flessibile in alcuni browser.

A seconda del browser, alcuni elementi HTML non accettano le modifiche display. Tre di questi elementi sono:

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

L'idea è quella di mantenere un livello di buon senso quando lo styling elementi HTML. Ad esempio, la regola impedisce agli autori di trasformare un fieldset in una tabella.

Tuttavia, v'è una soluzione semplice, in questo caso:

Soluzione: Avvolgere il contenuto del button in un span, e rendere il span il contenitore flessibile.

rettificato HTML (avvolto button contenuto in un 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> 

rettificato CSS (mirati span)

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

Revised Demo

NOTA: Sebbene non possano essere contenitori flessibili, gli elementi button possono essere elementi flessibili.

Riferimenti:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Answer 2

Ecco il mio trucco più semplice.

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