CSS के साथ तत्वों को कैसे केन्द्रित करें

सीएसएस के साथ तत्वों को केंद्रित करना जितना होना चाहिए, उससे कहीं अधिक कठिन प्रतीत होता है, खासकर यदि आपको क्षैतिज और लंबवत दोनों केंद्र की आवश्यकता होती है। आज मैं आपको दिखाऊंगा कि यह कैसे करना है, दोनों आधुनिक सीएसएस और थोड़ी पुरानी (लेकिन अभी भी प्रासंगिक) तकनीकों के साथ।

पाठ तत्वों को क्षैतिज रूप से मध्य करें

पाठ को क्षैतिज रूप से केन्द्रित करना सीधा आगे है। हम text-align . का उपयोग करते हैं संपत्ति और इसे center . का मान दें ।

h1 {
  text-align: center;
}

उपरोक्त किसी भी पाठ पर कार्य करेगा तत्व।

बीच में ब्लॉक एलिमेंट (गैर-टेक्स्ट) क्षैतिज रूप से

किसी भी गैर-पाठ तत्व को क्षैतिज रूप से केन्द्रित करने के लिए हम margin . का उपयोग कर सकते हैं संपत्ति और इसे auto . का बायां और दायां मान दें . हमें तत्व की चौड़ाई मान भी निर्दिष्ट करने की आवश्यकता है:

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

नोट:यदि आप अपने केंद्रित तत्व को एक विशिष्ट निश्चित चौड़ाई मान नहीं देना चाहते हैं, तो आप width: max-content का उपयोग कर सकते हैं — तब आपका तत्व अपनी सामग्री की चौड़ाई तक विस्तृत हो जाएगा।

ब्लॉक बनाम इनलाइन ब्लॉक एलिमेंट्स

.center-horizontal उपरोक्त वर्ग किसी भी ब्लॉक तत्व को केन्द्रित करेगा - लेकिन इनलाइन . नहीं तत्व HTML में, कुछ तत्व डिफ़ॉल्ट रूप से इनलाइन तत्व होते हैं। <button> उदाहरण के लिए तत्व में एक डिफ़ॉल्ट display: inline-block है अंदाज। लेकिन आप केवल display: block . जोड़कर इसे आसानी से एक ब्लॉक एलिमेंट में बना सकते हैं आपके सीएसएस वर्ग के लिए:

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

अब यह किसी भी तत्व पर काम करेगा।

Flexbox के साथ क्षैतिज रूप से केंद्र करें

क्षैतिज रूप से केंद्रित आधुनिक फ्लेक्सबॉक्स संपत्ति के साथ मृत सरल है। अपना वर्तमान .center-horizontal Replace बदलें इसके साथ कक्षा:

.center-horizontal {
  display: flex;
  justify-content: center;
}

जैसा कि आप देख सकते हैं, आपका <div> तत्व केंद्रित हो जाता है।

लेकिन किसी कारण से, आपका बटन तत्व नहीं है। क्या देता है?

खैर, <button> तत्व एक विशेष तत्व है जो <div> . के विपरीत है तत्व तथाकथित फ्लेक्स-कंटेनर नहीं हो सकता।

लेकिन बटन फ्लेक्स-आइटम हो सकते हैं जिसका मतलब है कि अगर आप अपने बटन को फ्लेक्स-कंटेनर के अंदर रखते हैं, तो सेंटरिंग काम करेगा। अपने संपादक में निम्न HTML जोड़ने का प्रयास करें:

<div class="center-horizontal">
  <button>Center me</button>
</div>

अब यह काम कर रहा है! मैंने अभी बटन तत्व से केंद्र वर्ग को हटा दिया है और इसे एक रैपिंग पैरेंट के अंदर इस्तेमाल किया है <div> कंटेनर।

युक्ति:<img> तत्व भी एक फ्लेक्स-कंटेनर नहीं हो सकता है, लेकिन यह बटन की तरह एक फ्लेक्स-आइटम हो सकता है।

-

तत्वों को लंबवत रूप से केंद्र में रखें

CSS शुरुआती को आमतौर पर तत्वों को लंबवत रूप से केंद्रित करने में समस्या होती है। फ्लेक्सबॉक्स इसे सरल बनाता है, लेकिन अच्छे उपाय के लिए, आइए पहले देखें कि यह पुराने सीएसएस विधियों के साथ कैसे काम करता है।

आप सोच सकते हैं कि आप मार्जिन-टॉप और मार्जिन-बॉटम auto जैसी किसी चीज़ का उपयोग कर सकते हैं - लेकिन नहीं।

लंबवत केंद्रित कार्य करने के लिए आपके पास एक निर्दिष्ट ऊंचाई वाला मूल कंटेनर भी होना चाहिए। अपने संपादक में निम्न HTML जोड़ें:

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

इस सीएसएस को अपने सेक्शन क्लास (पैरेंट) के लिए जोड़ें:

.section {
  height: 200px;
  border: 1px solid black;
}

सीमा केवल यह देखना आसान बनाने के लिए है कि क्या हो रहा है।

अब इस CSS को अपने चाइल्ड एलीमेंट के लिए जोड़ें:

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

हो गया!

Flexbox के साथ लंबवत केंद्र में

फ्लेक्सबॉक्स के साथ तत्वों को लंबवत रूप से केंद्रित करने के लिए, हमें एक पैरेंट फ्लेक्स कंटेनर की आवश्यकता होती है। आप 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>

और सीएसएस

.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 . के लिए संपत्ति हम एक घोषणा में एक्स और वाई अक्ष दोनों निर्दिष्ट करते हैं:(-50%, -50%) . पहला मान X है, दूसरा Y है।

फ्लेक्सबॉक्स के साथ लंबवत और क्षैतिज रूप से केंद्र करें

अंत में, फ्लेक्सबॉक्स का उपयोग करके वही ट्रिक करते हैं। आप center-vertical-and-horizontal को हटा सकते हैं अपने बच्चे के तत्व से कक्षा। अब आपके .section . के लिए वर्ग निम्नलिखित सीएसएस का उपयोग करें:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

इस और केंद्र के बीच पहले से लंबवत उदाहरण के बीच एकमात्र अंतर है, justify-content: center घोषणा, जो क्षैतिज केंद्रित कार्य को संभालती है।

सीएसएस ग्रिड के साथ क्षैतिज और लंबवत रूप से केंद्र करें

अच्छे उपाय के लिए आइए देखें कि एक आधुनिक-आधुनिक CSS ग्रिड संपत्ति कैसे लंबवत और क्षैतिज केंद्रीकरण को संभालती है। अपना .section बदलें इसके साथ कक्षा:

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

केवल दो गुण (display: grid &place-items:center ) सीएसएस ग्रिड के साथ काम करता है। बहुत सुविधाजनक!

दुर्भाग्य से, सीएसएस ग्रिड सभी आधुनिक ब्राउज़रों में संगत नहीं है, और यह वर्डप्रेस जैसे कई लोकप्रिय सीएमएस/फ्रेमवर्क में 100% काम नहीं करता है - फिर भी।

CSS ग्रिड की वर्तमान संगतता स्थिति यहाँ देखें।