CSS के साथ एलिमेंट्स को सेंटर करना जितना होना चाहिए उससे कहीं अधिक कठिन लगता है, विशेष रूप से यदि आपको क्षैतिज और लंबवत दोनों तरह से सेंटर करने की आवश्यकता है। आज मैं आपको दिखाऊंगा कि कैसे करना है, आधुनिक CSS और थोड़ी पुरानी (लेकिन अभी भी प्रासंगिक) तकनीकों दोनों के साथ।
टेक्स्ट एलिमेंट्स को क्षैतिज रूप से सेंटर करें
टेक्स्ट को क्षैतिज रूप से सेंटर करना सीधा है। हम text-align प्रॉपर्टी का उपयोग करते हैं और इसे center मान देते हैं।
h1 { text-align: center; }उपरोक्त किसी भी टेक्स्ट एलिमेंट पर काम करेगा।
ब्लॉक एलिमेंट्स (नॉन-टेक्स्ट) को क्षैतिज रूप से सेंटर करें
किसी भी नॉन-टेक्स्ट एलिमेंट को क्षैतिज रूप से सेंटर करने के लिए हम margin प्रॉपर्टी का उपयोग कर सकते हैं और इसे बाएं और दाएं मान auto दे सकते हैं। हमें एलिमेंट की चौड़ाई मान भी निर्दिष्ट करने की आवश्यकता है:
.center-horizontal { margin-left: auto; margin-right: auto; width: 100px; /* या max-content;*/ }नोट: यदि आप अपने सेंटर एलिमेंट को एक विशिष्ट निश्चित चौड़ाई मान नहीं देना चाहते हैं, तो आप width: max-content का उपयोग कर सकते हैं — तब आपका एलिमेंट अपने कंटेंट की चौड़ाई तक विस्तारित होगा।
ब्लॉक बनाम इनलाइन-ब्लॉक एलिमेंट्स
.center-horizontal क्लास ऊपर किसी भी ब्लॉक एलिमेंट को सेंटर करेगा — लेकिन इनलाइन एलिमेंट्स नहीं। HTML में, कुछ एलिमेंट्स डिफ़ॉल्ट रूप से इनलाइन एलिमेंट्स हैं। <button> एलिमेंट उदाहरण के लिए, डिफ़ॉल्ट display: inline-block स्टाइल है। लेकिन आप इसे केवल display: block को अपने CSS क्लास में जोड़कर ब्लॉक एलिमेंट में आसानी से बदल सकते हैं:
.center-horizontal { display: block; margin-left: auto; margin-right: auto; width: 100px; /* या max-content;*/ }अब यह किसी भी एलिमेंट पर काम करेगा।
फ्लेक्सबॉक्स के साथ क्षैतिज रूप से सेंटर करें
आधुनिक फ्लेक्सबॉक्स प्रॉपर्टी के साथ क्षैतिज रूप से सेंटर करना बेहद सरल है। अपने वर्तमान .center-horizontal क्लास को इसके साथ बदलें:
.center-horizontal { display: flex; justify-content: center; }जैसा कि आप देख सकते हैं, आपका <div> एलिमेंट सेंटर हो जाता है।
लेकिन किसी कारण से, आपका बटन एलिमेंट नहीं होता। क्या बात है?
खैर, <button> एलिमेंट एक विशेष एलिमेंट है जो <div> एलिमेंट के विपरीत एक तथाकथित फ्लेक्स-कंटेनर नहीं हो सकता।
लेकिन बटन फ्लेक्स-आइटम हो सकते हैं जिसका अर्थ है कि यदि आप अपने बटन को फ्लेक्स-कंटेनर के अंदर रखते हैं, तो सेंटरिंग काम करेगा। अपने एडिटर में निम्नलिखित HTML जोड़ने का प्रयास करें:
<div class="center-horizontal"> <button>Center me</button> </div>अब यह काम करता है! मैंने बस बटन एलिमेंट से सेंटर क्लास हटा दी और इसे एक रैपिंग पैरेंट <div> कंटेनर के अंदर उपयोग किया।
टिप: <img> एलिमेंट भी फ्लेक्स-कंटेनर नहीं हो सकता, लेकिन यह बटन्स की तरह ही फ्लेक्स-आइटम हो सकता है।
-
एलिमेंट्स को लंबवत सेंटर करें
CSS शुरुआती आमतौर पर एलिमेंट्स को लंबवत सेंटर करने में समस्या होती है। फ्लेक्सबॉक्स इसे सरल बनाता है, लेकिन अच्छे माप के लिए, आइए पहले देखें कि यह पुरानी CSS विधियों के साथ कैसे काम करता है।
आप सोच सकते हैं कि आप मार्जिन-टॉप और मार्जिन-बॉटम auto जैसी किसी चीज़ का उपयोग कर सकते हैं — लेकिन नहीं।
आपको लंबवत सेंटरिंग काम करने के लिए एक निर्दिष्ट ऊंचाई वाले पैरेंट कंटेनर की भी आवश्यकता है। अपने एडिटर में निम्नलिखित HTML जोड़ें:
<section class="section"> <div class="center-vertical">Center me vertically</div> </section>अपने सेक्शन क्लास (पैरेंट) के लिए यह CSS जोड़ें:
.section { height: 200px; border: 1px solid black; }बॉर्डर केवल यह देखने में आसान बनाने के लिए है कि क्या हो रहा है।
अब अपने चाइल्ड एलिमेंट के लिए यह CSS जोड़ें:
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }हो गया!
फ्लेक्सबॉक्स के साथ लंबवत सेंटर करें
फ्लेक्सबॉक्स के साथ एलिमेंट्स को लंबवत सेंटर करने के लिए, हमें एक पैरेंट फ्लेक्स कंटेनर की आवश्यकता है। आप पिछले उदाहरण से अपने चाइल्ड एलिमेंट से center-vertical क्लास हटा सकते हैं। अब अपने .section क्लास में ये दो फ्लेक्सबॉक्स प्रॉपर्टीज़ जोड़ें, जैसे:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; }और अब आपका चाइल्ड एलिमेंट फ्लेक्सबॉक्स के साथ लंबवत रूप से सेंटर है।
एलिमेंट को लंबवत और क्षैतिज दोनों तरह से सेंटर करें
एलिमेंट्स को लंबवत और क्षैतिज दोनों तरह से सेंटर करने के लिए हमें केवल कुछ प्रॉपर्टीज़ जोड़ने की आवश्यकता है। आइए पुरानी CSS विधि से शुरू करें।
पहले यह मार्कअप जोड़ें:
<section class="section"> <div class="center-vertical-and-horizontal"> Center me vertically & horizontally </div> </section>और CSS
.section { height: 200px; border: 1px solid black; } .center-vertical-and-horizontal { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; }जैसा कि आप देख सकते हैं, यह "फ्लेक्सबॉक्स के बिना एलिमेंट्स को लंबवत सेंटर करें" उदाहरण (फ्लेक्सबॉक्स के बिना) से बहुत समान है। यहां हम सिर्फ left: 50% डिक्लेरेशन जोड़ रहे हैं, और transform प्रॉपर्टी के लिए हम X और Y दोनों एक्सिस को एक डिक्लेरेशन में निर्दिष्ट करते हैं: (-50%, -50%). पहला मान X है, दूसरा Y है।
फ्लेक्सबॉक्स के साथ लंबवत और क्षैतिज रूप से सेंटर करें
अंत में, आइए वही ट्रिक फ्लेक्सबॉक्स का उपयोग करके करें। आप अपने चाइल्ड एलिमेंट से center-vertical-and-horizontal क्लास हटा सकते हैं। अब अपने .section क्लास के लिए निम्नलिखित CSS का उपयोग करें:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; justify-content: center; }इस और पहले के लंबवत सेंटर उदाहरण के बीच एकमात्र अंतर justify-content: center डिक्लेरेशन है, जो क्षैतिज सेंटरिंग का काम संभालता है।
CSS ग्रिड के साथ क्षैतिज और लंबवत सेंटर करें
अच्छे माप के लिए आइए देखें कि आधुनिक-आधुनिक CSS ग्रिड प्रॉपर्टी लंबवत और क्षैतिज सेंटरिंग को कैसे संभालती है। अपने .section क्लास को इसके साथ बदलें:
.section { height: 200px; border: 1px solid black; display: grid; place-items: center; }सिर्फ दो प्रॉपर्टीज़ (display: grid & place-items:center) CSS ग्रिड के साथ काम करती हैं। बहुत सुविधाजनक!
दुर्भाग्य से, CSS ग्रिड सभी आधुनिक ब्राउज़रों में संगत नहीं है, और कई लोकप्रिय CMS/फ्रेमवर्क्स, जैसे वर्डप्रेस में 100% काम नहीं करता — अभी तक।
CSS ग्रिड की वर्तमान संगतता स्थिति यहां देखें।
