 के साथ वस्तुओं को केन्द्रित करना काफी कठिन हुआ करता था। ख़ैर, अब ऐसा नहीं है. अब इसे करने के कई अलग-अलग तरीके हैं। और यह एक अच्छी बात है क्योंकि हमें अलग-अलग परिदृश्यों में अलग-अलग विकल्पों की आवश्यकता हो सकती है। इस वीडियो में हम वस्तुओं को केंद्र में रखने के मेरे तीन पसंदीदा तरीकों को देखेंगे, हम पोजिशनिंग का उपयोग करेंगे, फिर हम फ्लेक्सबॉक्स का उपयोग करेंगे, और अंत में, हम अपने गो-टू सीएसएस ग्रिड का उपयोग करेंगे। HTML और CSS  ठीक है, चलिए इस पर आते हैं।   https://youtu.be/XMH4c1xIZtE?embedable=true  यह वास्तव में इतनी अजीब बात है कि इतने लंबे समय तक वेब पर किसी कंटेनर के केंद्र में वस्तुओं को रखना इतना कठिन था। खैर, क्षैतिज केन्द्रीकरण आसान था, लेकिन हाल के वर्षों तक ऊर्ध्वाधर केन्द्रीकरण लगभग असंभव था।  आइटमों को केंद्र में रखने के लिए सीएसएस पोजिशनिंग का उपयोग करना  सीएसएस पोजिशनिंग का उपयोग करने वाली यह पहली विधि संभवतः सबसे लंबे समय तक रही है, लेकिन नए गुणों के उभरने के कारण यह थोड़ा विकसित हुआ है। आइए एक उदाहरण देखें.  यहां हमारे पास यह बॉक्स है जिसे हम लाल बॉर्डर वाले इस अन्य कंटेनर में केन्द्रित करना चाहते हैं। यह एक मजबूत तत्व है और इसे सीधे   तत्व के भीतर रखा गया है जो कि यह लाल बॉक्स है जिसे हम यहां देख रहे हैं।  div  हम इस पद्धति के लिए पूर्ण स्थिति का उपयोग करने जा रहे हैं तो आइए इसे अपने   तत्व में जोड़ें। strong   strong { position: absolute; }  अब, इसे सही ढंग से कार्य करने के लिए, हमारे   हमारे आइटम को तैनात करने के लिए एक पोजिशनिंग संदर्भ बनाने की आवश्यकता होगी। ऐसा करने के कई अलग-अलग तरीके हैं लेकिन इस उदाहरण के लिए सबसे अच्छा विकल्प सापेक्ष स्थिति का उपयोग करना है। div   div { position: relative; }  अब हम अपने तत्व को हमारे   की ऊंचाई के पचास प्रतिशत से नीचे और चौड़ाई के पचास प्रतिशत से अधिक नीचे रख सकते हैं। शीर्ष से नीचे की स्थिति के लिए हम पचास प्रतिशत के मूल्य के साथ नई तार्किक संपत्ति,   उपयोग कर सकते हैं। और, बाईं ओर से स्थिति के लिए हम पचास प्रतिशत के समान मान के साथ   उपयोग कर सकते हैं। div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; }  ठीक है, तो यह बिल्कुल केन्द्रित नहीं है, है ना?  खैर, ऐसा इसलिए है क्योंकि हमने आइटम को हमारे   के केंद्र में रखा है, लेकिन इसकी स्थिति इसके ऊपरी बाएं कोने पर आधारित है। अब हमें जो करने की ज़रूरत है वह आइटम को उसकी ऊंचाई के पचास प्रतिशत से ऊपर और उसकी चौड़ाई के पचास प्रतिशत से अधिक पीछे ले जाना है। इससे यह ठीक से केंद्र में स्थित हो जाएगा। लेकिन, हम यह कैसे कर सकते हैं? div  यह वास्तव में बहुत आसान है। हम नई सीएसएस   संपत्ति का उपयोग कर सकते हैं। पहला मान x-अक्ष के अनुदिश अनुवादित होगा. हमें पचास प्रतिशत पीछे जाने की आवश्यकता है, इसलिए हम नकारात्मक पचास प्रतिशत का मान जोड़ देंगे। और, दूसरा मान y-अक्ष के साथ अनुवादित होता है, हम इसे नकारात्मक पचास प्रतिशत का समान मान देंगे। translate     strong { ... translate: -50% -50%; }  और हम वहां जाते हैं. बिल्कुल केन्द्रित.  यहां स्थिति निर्धारण और अनुवाद का उपयोग करते हुए अंतिम कामकाजी उदाहरण दिया गया है:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  तो, यह एक तरीका है जिसे हम कर सकते हैं, लेकिन यह मेरा पसंदीदा नहीं है।  आइटमों को केन्द्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करना  यदि मैं कर सकता हूं, तो मैं पोजिशनिंग के बजाय फ्लेक्सबॉक्स का उपयोग करना पसंद करूंगा क्योंकि यह और भी आसान है, इसके लिए कोड की कम पंक्तियों की आवश्यकता होती है, कोई पोजिशनिंग संदर्भ नहीं होता है, और ईमानदारी से कहें तो यह एक बेहतर, अधिक आधुनिक समाधान जैसा लगता है। आइए एक उदाहरण देखें.  ठीक है, तो हम उसी बिंदु से शुरू कर रहे हैं, हमारे पास लाल सीमा के साथ हमारा बाहरी div है और फिर हमारा आंतरिक मजबूत तत्व है।   हम अपने डिव को डिस्प्ले, फ्लेक्स के साथ एक फ्लेक्स कंटेनर बनाकर शुरू करते हैं। फिर हम अपने आइटम को   संपत्ति और केंद्र के मूल्य के साथ एक्स-अक्ष के साथ केंद्र में संरेखित कर सकते हैं। और अंतिम लेकिन महत्वपूर्ण बात यह है कि, हम   प्रॉपर्टी और केंद्र के समान मान के साथ y-अक्ष के साथ संरेखित कर सकते हैं। justify-content align-items     div { display: flex; justify-content: center; align-items: center; }  और यह आपके पास है, आइटम ठीक से केंद्रित है और इस बार वहां तक पहुंचने के लिए कोड की केवल तीन पंक्तियां लगीं।  फ्लेक्सबॉक्स का उपयोग करके अंतिम कामकाजी उदाहरण यहां दिया गया है:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  तो यह अच्छा है और मुझे कभी-कभी ऐसा करने की आवश्यकता होती है, लेकिन वस्तुओं को केंद्र में रखने का मेरा पसंदीदा तरीका सीएसएस ग्रिड का उपयोग करना है। और फिर, इसके लिए मेरे कारण यह हैं कि यह   से भी आसान है और इसके लिए कम कोड की भी आवश्यकता होती है। flex  वस्तुओं को केन्द्रित करने के लिए ग्रिड का उपयोग करना  ठीक है, लाल बॉक्स और आंतरिक वस्तु के साथ भी वही शुरुआती बिंदु।   इस बार हम अपने डिव को   के   वैल्यू के साथ एक ग्रिड कंटेनर बनाएंगे। अब यहाँ अच्छी बात यह है कि यदि हम चाहें तो हम उन्हीं दो गुणों का उपयोग कर सकते हैं जिनका उपयोग हमने अपने फ्लेक्सबॉक्स उदाहरण के लिए किया था। हम   और   जोड़ सकते हैं। यह बिल्कुल उसी तरह से काम करता है। grid display justify-content: center align-items: center   div { display: grid; justify-content: center; align-items: center; }  थोड़ा अजीब है लेकिन यह ग्रिड के काम करने का तरीका ही है, यह उसी बॉक्स-संरेखण गुणों का उपयोग कर सकता है जो फ्लेक्सबॉक्स करता है। लेकिन, अगर हमने इसे इसी तरह छोड़ दिया तो वास्तव में ग्रिड का उपयोग करने का कोई फायदा नहीं होगा?  खैर, इसके बजाय हम क्या कर सकते हैं, इन संरेखण गुणों को हटा दें, और उन्हें स्थान-आइटम संपत्ति से बदल दें। और, हम इस संपत्ति को केंद्र का मूल्य दे सकते हैं।     div { display: grid; place-items: center; }  हम वहां गए, अब हमने इसे सीएसएस की केवल दो पंक्तियों तक सीमित कर दिया है।  यहां सीएसएस ग्रिड का उपयोग कर अंतिम कामकाजी उदाहरण दिया गया है:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  निष्कर्ष  तो जैसा कि मैंने पहले कहा था, यह निश्चित रूप से पहले की तुलना में बहुत आसान है। लेकिन ये सभी तकनीकें अभी भी बहुत प्रासंगिक हैं और किसी भी परिस्थिति में इनकी आवश्यकता हो सकती है, इसलिए किसी भी स्थिति में इन सभी को जानना अच्छा होगा। मैं निश्चित रूप से कम से कम कोड सीएसएस ग्रिड को प्राथमिकता दूंगा, और यदि वह काम नहीं करता है तो अगली सबसे अच्छी चीज फ्लेक्सबॉक्स है, और यदि उनमें से कोई भी काम नहीं करता है, तो पोजिशनिंग का प्रयास करें।    भी प्रकाशित किया गया है. यहाँ

Buy Me a Coffee

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

वस्तुओं को केन्द्रित करने के लिए 3 समकालीन सीएसएस तकनीकें

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps