schematu flexbox nie działa na przycisk lub elementów fieldset

Question

Próbuję centrum wewnętrzne elementy <button> -tag ze schematu flexbox na justify-content: center. Ale Safari ich nie centruje. Mogę zastosować ten sam styl do innych tagów i działa zgodnie z przeznaczeniem (patrz: <p> -tag). Tylko przycisk jest wyrównany do lewej.

Spróbuj Firefox lub Chrome i widać różnicę.

Czy istnieje styl agenta użytkownika, który muszę nadpisać? Lub jakiekolwiek inne rozwiązanie tego problemu?

I jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

Answer 1

Problem polega na tym, że element <button> nie może być elastyczny pojemnik w niektórych przeglądarkach.

W zależności od przeglądarki niektóre elementy HTML nie akceptują zmian display. Trzy z tych elementów są następujące:

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

Chodzi o to, aby utrzymać poziom zdrowego rozsądku podczas układania elementów HTML. Na przykład reguła uniemożliwia autorom przekształcenie zestawu pól w tabelę.

Jednak nie jest to łatwe obejście w tym przypadku:

Rozwiązanie: Wrap zawartość button w span i dokonać span flex kontenera.

Skorygowany HTML (zawinięte button zawartość w 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> 

Skorygowany CSS (ukierunkowane span)

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

Revised Demo

UWAGA: Chociaż nie mogą być pojemnikami flex, elementy button mogą być elementami flex.

Referencje:

• 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

Oto mój najprostszy Hack.

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