फ्लेक्सबॉक्स बटन या फ़ील्ड तत्वों पर काम नहीं कर रहा है

Question

मैं <button> के आंतरिक तत्वों को केंद्रित करने की कोशिश कर रहा हूं- फ्लेक्सबॉक्स के justify-content: center के साथ टैग करें। लेकिन सफारी उन्हें केंद्रित नहीं करता है। मैं एक ही शैली को किसी अन्य टैग पर लागू कर सकता हूं और यह इरादे से काम करता है (<p> -tag देखें)। केवल बटन बाएं-गठबंधन है।

फ़ायरफ़ॉक्स या क्रोम आज़माएं और आप अंतर देख सकते हैं।

क्या कोई उपयोगकर्ता एजेंट शैली है जिसे मुझे ओवरराइट करना है? या इस समस्या का कोई अन्य समाधान?

और एक jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

Answer 1

समस्या यह है कि <button> तत्व कुछ ब्राउज़रों में एक फ्लेक्स कंटेनर नहीं किया जा सकता है।

ब्राउज़र के आधार पर, कुछ HTML तत्व display परिवर्तन स्वीकार नहीं करेंगे। इन तत्वों में से तीन हैं:

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

विचार जब HTML तत्वों स्टाइल सामान्य ज्ञान के एक स्तर बनाए रखना है। उदाहरण के लिए, नियम लेखकों को एक फ़ील्ड को एक टेबल में बदलने से रोकता है।

हालांकि, इस मामले में एक आसान समाधान नहीं है:

समाधान: एक span में button की लपेटें सामग्री, और span फ्लेक्स कंटेनर बनाते हैं।

समायोजित एचटीएमएल (लिपटे button एक 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> 

समायोजित सीएसएस (लक्षित span)

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

Revised Demo

नोट: हालांकि वे फ्लेक्स कंटेनर नहीं हो सकते हैं, button तत्व फ्लेक्स आइटम हो सकते हैं।

संदर्भ:

• 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

यहाँ मेरी सबसे सरल हैक है।

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