सेंटरिंग की पांच तकनीकों को फ़ॉलो करें. इन्हें कई टेस्ट से गुज़ारा जाता है, ताकि यह देखा जा सके कि कौनसी तकनीक बदलावों के हिसाब से सबसे ज़्यादा बेहतर है.
सीएसएस में एलिमेंट को सेंटर में अलाइन करना एक मुश्किल काम है. इस पर कई मज़ाक़ और मीम भी बने हैं. 2020 सीएसएस अब काफ़ी बेहतर हो गई है. अब हम उन चुटकुलों पर खुलकर हंस सकते हैं, न कि दांत पीसकर.
अगर आपको वीडियो देखना पसंद है, तो इस पोस्ट का YouTube वर्शन यहां देखें:
चुनौती
सेंटरिंग अलग-अलग तरह की होती है. जैसे, अलग-अलग तरह के इस्तेमाल, सेंटर में रखी जाने वाली चीज़ों की संख्या वगैरह. सेंटरिंग की "सबसे सही" तकनीक के पीछे की वजह बताने के लिए, मैंने द रेज़िलियंस रिंगर बनाया. यह हर सेंटरिंग रणनीति के लिए, स्ट्रेस टेस्ट की एक सीरीज़ है. इससे, आपको उनके बीच संतुलन बनाने और उनकी परफ़ॉर्मेंस को मॉनिटर करने में मदद मिलती है. आखिर में, मैं सबसे ज़्यादा स्कोर करने वाली तकनीक के साथ-साथ "सबसे अहम" तकनीक के बारे में भी बताता हूं. उम्मीद है कि आपको फ़ोकस करने की नई तकनीकें और समाधान मिले होंगे.
द रेज़िलियंस रिंगर
रेज़िलियंस रिंगर, मेरे इस विश्वास को दिखाता है कि सेंटरिंग की रणनीति ऐसी होनी चाहिए जो अंतरराष्ट्रीय लेआउट, अलग-अलग साइज़ के व्यूपोर्ट, टेक्स्ट में किए गए बदलावों, और डाइनैमिक कॉन्टेंट के हिसाब से काम कर सके. इन सिद्धांतों की मदद से, सेंटरिंग की तकनीकों के लिए, रेज़िलियंस टेस्ट तैयार किए गए. इन टेस्ट से यह पता चलता है कि सेंटरिंग की तकनीकें कितनी कारगर हैं:
- स्क्विश: सेंटरिंग की सुविधा, चौड़ाई में होने वाले बदलावों को हैंडल कर सकती है
- स्क्वैश किया गया: सेंटरिंग की सुविधा, ऊंचाई में होने वाले बदलावों को मैनेज कर सकती है
- डुप्लीकेट: आइटम की संख्या के हिसाब से, सेंटरिंग डाइनैमिक होनी चाहिए
- बदलाव: कॉन्टेंट की लंबाई और भाषा के हिसाब से, टेक्स्ट को बीच में अलाइन किया जाना चाहिए
- फ़्लो: सेंटरिंग, दस्तावेज़ की दिशा और लिखने के मोड के हिसाब से होनी चाहिए
विजेता समाधान को अपनी मज़बूती दिखानी चाहिए. इसके लिए, उसे कॉन्टेंट को बीच में रखना चाहिए. भले ही, उसे दबाया गया हो, कुचला गया हो, डुप्लीकेट किया गया हो, उसमें बदलाव किया गया हो, और उसे अलग-अलग भाषा मोड और दिशाओं में बदला गया हो. भरोसेमंद और मज़बूत सेंटर, एक सुरक्षित सेंटर.
Legend
मैंने कुछ विज़ुअल कलर हिंट दिए हैं, ताकि आपको कुछ मेटा जानकारी को कॉन्टेक्स्ट में रखने में मदद मिल सके:
- गुलाबी बॉर्डर से पता चलता है कि सेंटरिंग स्टाइल का मालिकाना हक किसके पास है
- ग्रे बॉक्स, कंटेनर का बैकग्राउंड है. इसमें आइटम को बीच में रखा जाता है
- हर चाइल्ड बॉक्स का बैकग्राउंड सफ़ेद रंग का होता है, ताकि चाइल्ड बॉक्स के साइज़ पर सेंटरिंग तकनीक के असर को देखा जा सके (अगर कोई असर हुआ हो)
पांच प्रतियोगी
रेज़िलियंस रिंगर में, खुद को शांत रखने की पांच तकनीकों के बारे में बताया गया है. इनमें से सिर्फ़ एक को रेज़िलियंस क्राउन 👸 मिलेगा.
1. कॉन्टेंट सेंटर
- स्क्विश: बहुत बढ़िया!
- स्क्वॉश: बहुत बढ़िया!
- डुप्लीकेट: बहुत बढ़िया!
- बदलाव करें: बहुत बढ़िया!
- Flow: बहुत बढ़िया!
display: grid और place-content शॉर्टहैंड की तरह कम शब्दों में अपनी बात कहना मुश्किल होगा. यह बच्चों को एक साथ सेंटर और जस्टिफ़ाई करता है. इसलिए, यह उन एलिमेंट के ग्रुप को सेंटर करने की एक बेहतरीन तकनीक है जिन्हें पढ़ा जाना है.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- कॉन्टेंट को सीमित जगह और ओवरफ़्लो होने पर भी बीच में रखा जाता है
- बदलाव करने और कॉन्टेंट को मैनेज करने की सुविधा एक ही जगह पर मिलती है
- गैप से यह पक्का होता है कि n चाइल्ड एलिमेंट के बीच बराबर स्पेस हो
- ग्रिड, डिफ़ॉल्ट रूप से पंक्तियां बनाता है
- सबसे ज़्यादा चौड़ाई वाला चाइल्ड (
max-content), बाकी सभी चाइल्ड की चौड़ाई सेट करता है. इस बारे में जेंटल फ़्लेक्स में ज़्यादा बात की जाएगी.
यह पैराग्राफ़ और हेडलाइन, प्रोटोटाइप या आम तौर पर ऐसी चीज़ों वाले मैक्रो लेआउट के लिए बेहतरीन है जिन्हें आसानी से पढ़ा जा सके.
2. Gentle Flex
- स्क्विश: बहुत बढ़िया!
- स्क्वॉश: बहुत बढ़िया!
- डुप्लीकेट: बहुत बढ़िया!
- बदलाव करें: बढ़िया!
- Flow: बहुत बढ़िया!
Gentle Flex, सिर्फ़ सेंटरिंग पर आधारित रणनीति है. यह सॉफ़्ट और जेंटल है, क्योंकि place-content: center के उलट, सेंटरिंग के दौरान चाइल्ड बॉक्स के साइज़ में कोई बदलाव नहीं किया जाता. सभी आइटम को जितना हो सके उतने आराम से स्टैक किया जाता है, बीच में रखा जाता है, और उनके बीच में जगह छोड़ी जाती है.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- यह सिर्फ़ अलाइनमेंट, दिशा, और डिस्ट्रिब्यूशन को मैनेज करता है
- बदलाव और रखरखाव की सुविधा एक ही जगह पर उपलब्ध है
- गैप से यह पक्का होता है कि n चाइल्ड एलिमेंट के बीच बराबर स्पेस हो
- कोड की सबसे ज़्यादा लाइनें
यह मैक्रो और माइक्रो, दोनों तरह के लेआउट के लिए बेहतरीन है.
3. Autobot
- दबाने पर: बेहतरीन
- स्क्वॉश: बहुत बढ़िया
- डुप्लीकेट: ठीक है
- बदलाव करना: बहुत बढ़िया
- फ़्लो: बेहतरीन
कंटेनर को फ़्लेक्स पर सेट किया गया है और इसमें अलाइनमेंट की कोई स्टाइल नहीं है. वहीं, डायरेक्ट चाइल्ड एलिमेंट को ऑटो मार्जिन के साथ स्टाइल किया गया है. एलिमेंट के हर हिस्से पर काम करने वाले margin: auto के बारे में कुछ ऐसा है जो हमें पुरानी यादों में ले जाता है और शानदार है.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- मज़ेदार ट्रिक
- तेज़ और आसान तरीका
- ओवरफ़्लो होने पर अजीब नतीजे दिखना
- गैप के बजाय डिस्ट्रिब्यूशन पर भरोसा करने का मतलब है कि लेआउट, बच्चों के साइड को छूने के साथ हो सकते हैं
- किसी एलिमेंट को "पुश" करके उसकी पोज़िशन बदलना सही नहीं है. इससे चाइल्ड बॉक्स के साइज़ में बदलाव हो सकता है
आइकॉन या सूडो-एलिमेंट को बीच में लाने के लिए बेहतरीन.
4. फ़्लफ़ी सेंटर
- स्क्विश: खराब
- स्क्वॉश: खराब
- डुप्लीकेट: खराब
- बदलाव करें: बढ़िया!
- Flow: बहुत बढ़िया! (जब तक लॉजिकल प्रॉपर्टी का इस्तेमाल किया जाता है)
"फ़्लफ़ी सेंटर" अब तक का सबसे स्वादिष्ट लगने वाला प्रतियोगी है. साथ ही, यह सेंटरिंग की एकमात्र ऐसी तकनीक है जो पूरी तरह से एलिमेंट/चाइल्ड के मालिकाना हक वाली है. क्या आपको हमारा गुलाबी रंग का अंदरूनी बॉर्डर दिख रहा है!?
.fluffy-center {
padding: 10ch;
}
- कॉन्टेंट को सुरक्षित रखता है
- ऐटॉमिक
- हर टेस्ट में, सेंटरिंग की यह रणनीति गुप्त रूप से शामिल होती है
- शब्दों के बीच की जगह को गैप कहा जाता है
- काम का न होने का भ्रम
- कंटेनर और आइटम के बीच टकराव हो रहा है. ऐसा इसलिए, क्योंकि दोनों ही अपने साइज़ को लेकर बहुत सख्त हैं
यह शब्द या वाक्यांश पर आधारित सेंटरिंग, टैग, पिल, बटन, चिप वगैरह के लिए बेहतरीन है.
5. पॉप और प्लॉप
- स्क्विश: ठीक है
- स्क्वॉश: ठीक है
- डुप्लीकेट: खराब
- बदलाव: ठीक है
- फ़्लो: ठीक है
यह "पॉप" होता है, क्योंकि ऐब्सलूट पोज़िशनिंग, एलिमेंट को सामान्य फ़्लो से बाहर निकाल देती है. इनके नाम में "प्लॉप" शब्द इसलिए शामिल है, क्योंकि मुझे यह सबसे ज़्यादा तब काम का लगता है, जब इसे किसी दूसरी चीज़ के ऊपर रखा जाता है. यह ओवरले को बीच में लाने की एक क्लासिक और आसान तकनीक है. यह कॉन्टेंट के साइज़ के हिसाब से फ़्लेक्सिबल और डाइनैमिक है. कभी-कभी आपको एक यूज़र इंटरफ़ेस (यूआई) के ऊपर दूसरा यूज़र इंटरफ़ेस (यूआई) रखना पड़ता है.
- काम का है
- भरोसेमंद
- ज़रूरत के समय, यह बेहद काम की साबित होती है
- नेगेटिव प्रतिशत वैल्यू वाला कोड
- कंटेनिंग ब्लॉक को लागू करने के लिए,
position: relativeकी ज़रूरत होती है - जल्दी और अजीब तरीके से लाइन ब्रेक करना
- बिना किसी अतिरिक्त मेहनत के, हर कंटेनर ब्लॉक में सिर्फ़ एक ही एलिमेंट हो सकता है
इनके लिए बेहतरीन है: मॉडल, टोस्ट और मैसेज, स्टैक और डेप्थ इफ़ेक्ट, पॉपओवर.
विजेता
अगर मैं किसी टापू पर हूं और मुझे मिट्टी को सेंटर करने की सिर्फ़ एक तकनीक इस्तेमाल करने की अनुमति हो, तो मैं…
[ड्रम रोल]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
यह आपको मेरी स्टाइलशीट में हमेशा दिखेगा, क्योंकि यह मैक्रो और माइक्रो लेआउट, दोनों के लिए काम का है. यह हर तरह से भरोसेमंद समाधान है. इसके नतीजे मेरी उम्मीदों के मुताबिक हैं. साथ ही, मुझे इंट्रिन्सिक साइज़िंग बहुत पसंद है. इसलिए, मैं इस तरीके का इस्तेमाल करता हूं. यह सच है कि इसमें बहुत कुछ टाइप करना पड़ता है, लेकिन इससे मिलने वाले फ़ायदे, अतिरिक्त कोड से ज़्यादा होते हैं.
एमवीपी
Fluffy Center
.fluffy-center {
padding: 2ch;
}
फ़्लफ़ी सेंटर इतना छोटा होता है कि इसे सेंटरिंग तकनीक के तौर पर नज़रअंदाज़ करना आसान है. हालांकि, यह मेरी सेंटरिंग रणनीतियों का एक अहम हिस्सा है. यह इतना छोटा है कि कभी-कभी मुझे याद ही नहीं रहता कि मैं इसे इस्तेमाल कर रहा हूँ.
नतीजा
किस तरह की चीज़ों से, ध्यान केंद्रित करने की आपकी रणनीतियां काम नहीं करतीं? रेज़िलियंस रिंगर में और कौनसे चैलेंज जोड़े जा सकते हैं? मैंने कंटेनर पर ट्रांसलेशन और ऑटो-हाइट स्विच के बारे में सोचा… और क्या!?
अब जब आपको पता चल गया है कि मैंने यह कैसे किया, तो आप इसे कैसे करेंगे?! आइए, अपने तरीकों में विविधता लाएं और वेब पर कॉन्टेंट बनाने के सभी तरीके जानें. इस पोस्ट में दिए गए कोड लैब को फ़ॉलो करके, इस पोस्ट में दिए गए उदाहरणों की तरह ही, सेंटरिंग का अपना उदाहरण बनाएं. अपने वर्शन को मुझे ट्वीट करें. मैं उसे नीचे दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगा.