ब्लॉक और टेबल लेआउट में कॉन्टेंट अलाइन करने के लिए सहायता

Rachel Andrew

Chrome 123 से, ब्लॉक और टेबल लेआउट पर सीएसएस बॉक्स अलाइनमेंट की align-content प्रॉपर्टी का इस्तेमाल किया जा सकता है. इससे फ़्लेक्स या ग्रिड लेआउट बनाए बिना, ब्लॉक के अलाइनमेंट को बदला जा सकेगा. हालांकि, अगर आपने लेआउट के इन तरीकों के बाहर align-content का इस्तेमाल किया है, तो आपको अपनी सीएसएस अपडेट करनी पड़ सकती है. ऐसा इसलिए, क्योंकि अब यह लागू हो जाएगा.

Browser Support

• 123
• 123
• 125
• 17.4

फ़्लेक्स और ग्रिड लेआउट में align-content

आपने शायद फ़्लेक्स आइटम या ग्रिड ट्रैक को अलाइन करने के लिए, align-content का इस्तेमाल किया हो. फ़्लेक्स लेआउट में, align-content प्रॉपर्टी का इस्तेमाल फ़्लेक्स कंटेनर पर किया जाता है, ताकि फ़्लेक्स आइटम को क्रॉस ऐक्सिस पर अलाइन किया जा सके. इस उदाहरण में, इसकी वैल्यू space-between है. इसलिए, यह फ़्लेक्स कंटेनर में उपलब्ध स्पेस को फ़्लेक्स लाइनों के बीच बांट रहा है.

align-content प्रॉपर्टी की वजह से, फ़्लेक्स आइटम की लाइनों के बीच स्पेस आ जाता है. ऐसा इसलिए होता है, क्योंकि फ़्लेक्स कंटेनर में क्रॉस ऐक्सिस में अतिरिक्त स्पेस होता है.

किसी आइटम को वर्टिकल तौर पर बीच में रखना

कंटेनर में किसी आइटम को वर्टिकल तौर पर बीच में लाने के लिए, align-content का इस्तेमाल करना खास तौर पर फ़ायदेमंद होता है. इसके लिए, align-content: center के साथ display: flex का इस्तेमाल करें. इससे आइटम एक फ़्लेक्स आइटम बन जाता है. साथ ही, फ़्लेक्स आइटम के डिफ़ॉल्ट व्यवहार से जुड़ी अन्य सेटिंग भी लागू हो जाती हैं. यहां दिए गए उदाहरण में, हेडिंग को align-content: center की मदद से वर्टिकल तौर पर बीच में अलाइन किया गया है. इससे आइटम का साइज़, कॉन्टेंट के हिसाब से छोटा हो जाता है. इसलिए, आपको आइटम पर flex-grow: 1 लागू करना होगा.

align-content प्रॉपर्टी, हेडिंग को फ़्लेक्स कंटेनर में वर्टिकल तरीके से बीच में अलाइन करती है.

ब्लॉक लेआउट के लिए align-content उपलब्ध होने पर, आपको वर्टिकल अलाइनमेंट मिल जाएगा. इसके लिए, आपको प्रॉपर्टी के लिए फ़्लेक्स लेआउट बनाने की ज़रूरत नहीं होगी. किसी अन्य प्रॉपर्टी की ज़रूरत नहीं है, क्योंकि आइटम ब्लॉक आइटम ही रहता है. इसमें सिर्फ़ अलाइनमेंट में बदलाव होता है.

align-content प्रॉपर्टी, हेडिंग को ब्लॉक कंटेनर में वर्टिकल तौर पर बीच में अलाइन करती है. इसके लिए, Chrome 123 या Safari 17.4 या उसके बाद के वर्शन की ज़रूरत होती है.

ब्लॉक लेआउट में align-content की सुविधा काम करती है या नहीं, इसकी जांच करने के लिए टेस्ट

माफ़ करें, ब्लॉक लेआउट में align-content की सुविधा काम करती है या नहीं, यह टेस्ट नहीं किया जा सकता. align-content को फ़्लेक्स और ग्रिड लेआउट में लंबे समय से इस्तेमाल किया जा रहा है. इसलिए, @supports के साथ फ़ीचर क्वेरी का इस्तेमाल करने पर, हमेशा 'सही है' वैल्यू मिलेगी. यह वही स्थिति है जो फ़्लेक्सबॉक्स में gap प्रॉपर्टी के साथ हुई थी. सीएसएस वर्किंग ग्रुप, इस तरह के आंशिक तौर पर लागू किए गए समाधानों पर काम कर रहा है.

अपनी साइटों पर अलाइनमेंट से जुड़ी समस्याओं की जांच करना

align-content प्रॉपर्टी को कई सालों से स्पेसिफ़िकेशन में ब्लॉक लेआउट पर काम करने के तौर पर तय किया गया है. इन कॉन्टेक्स्ट के बाहर, कोई भी ब्राउज़र align-content के साथ काम नहीं करता. इसलिए, यह कुछ नहीं करता. हालांकि, अगर आपने प्रॉपर्टी को किसी ऐसे कंटेनर में जोड़ा है जो फ़्लेक्स या ग्रिड कंटेनर नहीं है, तो Chrome 123 से यह प्रॉपर्टी काम करने लगेगी. अपनी सीएसएस में align-content के इस्तेमाल के बारे में खोजें. अगर आपको लगता है कि आपकी साइटों और ऐप्लिकेशन के लिए यह समस्या हो सकती है, तो उन्हें टेस्ट करने के लिए बीटा वर्शन का इस्तेमाल करें.