फ्लेक्स / ग्रिड लेआउट बटन या फ़ील्डसेट तत्वों पर काम नहीं कर रहे हैं

Question

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

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

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

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>

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

Comments

इसी तरह का मुद्दा: फ्लेक्स कंटेनर क्यों नहीं हो सकते?

— ओरिऑल

Answer 1

समस्या

कुछ ब्राउज़रों में <button>तत्व इसके displayमान में परिवर्तन स्वीकार नहीं करता है , के बीच स्विच करने से परे blockऔर inline-block। इसका मतलब है कि एक <button>तत्व फ्लेक्स या ग्रिड कंटेनर या ए नहीं हो सकता है <table>।

<button>तत्वों के अलावा , आप इस बाधा को <fieldset>और <legend>तत्वों पर भी लागू कर सकते हैं ।

अधिक विवरण के लिए नीचे दी गई बग रिपोर्ट देखें।

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

---

समाधान

इस समस्या का एक सरल और आसान क्रॉस-ब्राउज़र समाधान है:

की सामग्री लपेटें buttonएक में span, और spanफ्लेक्स कंटेनर।

समायोजित HTML (लपेटी गई 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;
}

संशोधित डेमो

---

संदर्भ / बग रिपोर्ट

Flexbox <button>सामग्री को अवरुद्ध करता है, लेकिन एक फ्लेक्स स्वरूपण संदर्भ को स्थापित नहीं करता है

उपयोगकर्ता (Oriol Brufau): के बच्चों <button>blockified कर रहे हैं, बातें के रूप में flexbox कल्पना। हालाँकि, यह <button>फ्लेक्स एक के बजाय एक ब्लॉक स्वरूपण संदर्भ स्थापित करने के लिए लगता है।

उपयोगकर्ता (डैनियल होल्बर्ट): यह प्रभावी रूप से HTML कल्पना की आवश्यकता है। कई HTML कंटेनर-तत्व "विशेष" हैं और प्रभावी रूप displayसे गेको में उनके सीएसएस मूल्य को अनदेखा करते हैं [एक तरफ चाहे वह इनलाइन-स्तर बनाम ब्लॉक-स्तर] हो। <button>इनमें से एक है। <fieldset>और भी <legend>हैं।

प्रदर्शन के लिए समर्थन जोड़ें: <button>तत्वों के अंदर फ्लेक्स / ग्रिड और कॉलमसेट लेआउट

उपयोगकर्ता (डैनियल होल्बर्ट):

<button>शुद्ध सीएसएस में (ब्राउज़रों द्वारा) लागू करने योग्य नहीं है, इसलिए वे सीएसएस के दृष्टिकोण से एक ब्लैक बॉक्स के एक बिट हैं। इसका मतलब यह है कि वे आवश्यक रूप से उसी तरह से प्रतिक्रिया नहीं करते हैं जैसे कि एक <div> ।

यह फ्लेक्सबॉक्स के लिए विशिष्ट नहीं है - उदाहरण के लिए, यदि आप overflow:scrollएक बटन पर रखते हैं तो हम स्क्रॉलबार को प्रस्तुत नहीं करते हैं , और यदि आप display:tableइसे डालते हैं तो हम इसे तालिका के रूप में प्रस्तुत नहीं करते हैं ।

आगे भी आगे बढ़ना, यह विशिष्ट नहीं है <button>। विचार करें <fieldset>और <table>जो विशेष प्रतिपादन व्यवहार है।

और पुराने timey एचटीएमएल जैसे तत्वों <button>और <table>और <fieldset>बस कस्टम का समर्थन नहीं करते displayमूल्यों, का बहुत ही उच्च स्तर सवाल का जवाब देने के प्रयोजनों के लिए अन्य की तुलना में "इस तत्व ब्लॉक स्तर या इनलाइन स्तर है", तत्व के चारों ओर अन्य सामग्री बहने के लिए ।

और देखें:

• Flexbug # 9: कुछ HTML तत्व फ्लेक्स कंटेनर नहीं हो सकते
• 10. कुछ HTML तत्व ग्रिड कंटेनर नहीं हो सकते हैं

Comments

मुझे लगता है कि यह <button>एस के लिए काम नहीं कर सकता है , लेकिन पृथ्वी पर क्यों यह <fieldset>या तो काम नहीं कर रहा है ? क्या उस तत्व को एक नियमित ब्लॉक स्तर का तत्व नहीं माना जाना चाहिए जो फ्लेक्स कंटेनर के लिए मान्य है?

— fritzmg

@fritzmg। माना। नियम शायद CSS3 प्रौद्योगिकियों जैसे कि फ्लेक्स और ग्रिड से पहले से मौजूद है, और उनका पुनर्मूल्यांकन किया जाना चाहिए।

— माइकल बेंजामिन

इसलिए हम एक बटन को दुरुपयोग होने से रोकना चाहेंगे ... लेकिन फिर भी किसी और चीज़ का दुरुपयोग कर सकते हैं और इसे बटन के अंदर रख सकते हैं। बाकी वेब के रूप में तर्क के बारे में लगता है ...

— रोमेन विंसेंट

@Michael_B वास्तविक पाठ के संदर्भ को जोड़ने पर विचार करें जहाँ आप अभिकथन करते हैं। मेरी टिप्पणी का जवाब देने की कोई आवश्यकता नहीं है - यदि आप इसे उस पाठ में जोड़ते हैं जहां आप जोर देते हैं तो मैं आपको उत्थान दूंगा।

— मिक्मेकाना

एक कारण से divबच्चा नहीं हो सकता है button, यदि आप पुराने स्कूल के HTML में सोचते हैं, तो ब्लॉक-स्तरीय तत्व इनलाइन-स्तरीय तत्व का बच्चा नहीं हो सकता है। लेकिन आज, HTML5 के साथ, तकनीकी रूप से सही उत्तर यह है कि एक buttonतत्व केवल Phrasing Content को स्वीकार कर सकता है । A फ़्रेसिंग सामग्री काspan प्रतिनिधित्व करता है , लेकिन करता नहीं है। A प्रवाह सामग्री का प्रतिनिधित्व करता है । अधिक जानकारीdivdiv

— माइकल बेंजामिन

Answer 2

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

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

Comments

मेरे लिए काम नहीं करता है। : आप कैसे इसे ठीक होगा codepen.io/nuthinking/pen/...

— Nuthinking

Answer 3

Chrome 83 को प्रारंभ करना, जो buttonअब काम करता है inline-grid/grid/inline-flex/flex, आप इस नई सुविधा के बारे में यहां देख सकते हैं

यहाँ एक स्निपेट है (क्रोम 83 और उससे अधिक का उपयोग करने वालों के लिए)

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">