फ्लेक्सबॉक्स में ऊर्ध्वाधर और क्षैतिज रूप से केंद्र तत्वों को कैसे करें
नीचे दो सामान्य केंद्रित समाधान दिए गए हैं।
एक लंबवत-संरेखित फ्लेक्स आइटम ( flex-direction: column) के लिए और दूसरा क्षैतिज-संरेखित फ्लेक्स आइटम ( flex-direction: row) के लिए।
दोनों ही मामलों में केन्द्रित विभाजनों की ऊंचाई परिवर्तनशील, अपरिभाषित, अज्ञात, जो भी हो। केंद्रित divs की ऊंचाई कोई फर्क नहीं पड़ता।
यहाँ दोनों के लिए HTML है:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
सीएसएस (सजावटी शैलियों को छोड़कर)
जब फ्लेक्स आइटम खड़ी खड़ी हो जाती हैं:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
डेमो
जब फ्लेक्स आइटम क्षैतिज रूप से स्टैक्ड होते हैं:
flex-directionऊपर दिए गए कोड से नियम को समायोजित करें ।
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
डेमो
फ्लेक्स आइटम की सामग्री को केंद्रित करना
एक फ्लेक्स स्वरूपण संदर्भ का दायरा माता-पिता-बच्चे के संबंध तक सीमित है। बच्चों से परे एक फ्लेक्स कंटेनर के वंशज फ्लेक्स लेआउट में भाग नहीं लेते हैं और फ्लेक्स गुणों की अनदेखी करेंगे। अनिवार्य रूप से, फ्लेक्स गुण बच्चों से परे अंतर्निहित नहीं हैं।
इसलिए, आपको बच्चे को फ्लेक्स गुणों को लागू करने के लिए हमेशा एक मूल तत्व display: flexया display: inline-flexआवेदन करना होगा।
लचीले आइटम में निहित लंबवत और / या क्षैतिज रूप से केंद्र पाठ या अन्य सामग्री के लिए, आइटम को एक (नेस्टेड) फ्लेक्स कंटेनर बनाते हैं, और केंद्र के नियमों को दोहराते हैं।
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
यहाँ अधिक विवरण: फ्लेक्सबॉक्स के अंदर पाठ को लंबवत रूप से कैसे संरेखित करें?
वैकल्पिक रूप से, आप margin: autoफ्लेक्स आइटम के सामग्री तत्व पर आवेदन कर सकते हैं ।
p { margin: auto; }
फ्लेक्स autoमार्जिन के बारे में यहाँ जानें : फ्लेक्स आइटम्स को संरेखित करने के तरीके (देखें बॉक्स # 56)।
फ्लेक्स आइटम की कई लाइनों को केंद्रित करना
जब एक फ्लेक्स कंटेनर में कई लाइनें (लपेटने के कारण) होती हैं, तो align-contentसंपत्ति क्रॉस-अक्ष संरेखण के लिए आवश्यक होगी।
कल्पना से:
8.4। पैकिंग फ्लेक्स लाइन्स: align-content
संपत्ति
align-contentसंपत्ति फ्लेक्स कंटेनर के भीतर एक फ्लेक्स कंटेनर की लाइनों संरेखित करता है जब पार अक्ष में अतिरिक्त स्थान, कैसे करने के लिए इसी तरह की है justify-contentमुख्य अक्ष के भीतर संरेखित करता है अलग-अलग आइटम।
ध्यान दें, इस संपत्ति का एकल-लाइन फ्लेक्स कंटेनर पर कोई प्रभाव नहीं है।
यहां अधिक विवरण: एलाइन-सेल्फ, अलाइन-आइटम और एलाइन-कंटेंट के साथ फ्लेक्स-रैप कैसे काम करता है?
ब्राउज़र का समर्थन
फ्लेक्सबॉक्स IE <10 को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित है । कुछ हालिया ब्राउज़र संस्करणों, जैसे कि सफारी 8 और IE10 को वेंडर उपसर्गों की आवश्यकता होती है । उपसर्गों को जोड़ने के एक त्वरित तरीके के लिए ऑटोप्रिफ़र का उपयोग करें । इस उत्तर में अधिक जानकारी ।
पुराने ब्राउज़रों के लिए समाधान केंद्रित करना
CSS टेबल और पोजिशनिंग प्रॉपर्टी के उपयोग से वैकल्पिक सेंटरिंग सॉल्यूशन के लिए यह उत्तर देखें: https://stackoverflow.com/a/31977476/3597276
