इस CSS ट्यूटोरियल में, हम टेक्स्ट और ब्लॉक एलिमेंट्स को सेंटर करने के तरीके पर जाएंगे। लेआउट में एलिमेंट्स को क्षैतिज और लंबवत रूप से सेंटर करने के लिए आप कई ट्रिक्स का उपयोग कर सकते हैं।
1. टेक्स्ट एलिमेंट्स को सेंटर अलाइन करें
एक बड़े एलिमेंट के अंदर टेक्स्ट को सेंटर अलाइन करने के लिए, text-align: center; का उपयोग करें:
.div-class { text-align: center; background-color: lightblue; }
2. ब्लॉक एलिमेंट्स को सेंटर अलाइन करें
ब्लॉक एलिमेंट्स को सेंटर करना <body> टैग का उपयोग करके सबसे अच्छा दिखाया जाता है। समग्र कंटेनर की चौड़ाई को नियंत्रित करें और फिर मार्जिन को ऑटो पर सेट करें:
body { width: 800px; margin: auto; background: darkcyan; }
3. इमेज को सेंटर करें
इमेज को सेंटर करने के लिए, CSS सिलेक्टर में डिस्प्ले को ब्लॉक में बदलें और फिर इमेज एलिमेंट की चौड़ाई को नियंत्रित करें, % या px का उपयोग करके। margin को auto पर सेट करें:
img { display: block; margin: 20px auto; width: 50%; }
4. डिव में लंबवत और क्षैतिज रूप से सेंटर करें
विधि A: पैडिंग (सबसे आसान)
अपने <div> में पैडिंग समायोजित करें और फिर पैराग्राफ को क्षैतिज रूप से सेंटर करने के लिए text-align: center का उपयोग करें।
विधि B: line-height
line-height को ब्लॉक एलिमेंट की ऊंचाई पर सेट करें जिसके साथ text-align: center हो। एकाधिक लाइनों के लिए, पैरेंट और चाइल्ड दोनों पर line-height का उपयोग करें और चाइल्ड में vertical-align: middle और display: inline-block जोड़ें।
विधि C: ट्रांसफॉर्म (Transform)
पैरेंट को position: relative पर सेट करें, चाइल्ड को निरपेक्ष पोजिशनिंग पर। चाइल्ड को टॉप और लेफ्ट पर 50% पर पोजिशन करें और फिर transform: translate(-50%, -50%) का उपयोग करके डिव में टेक्स्ट को समायोजित करें।
#vertical-center-transform {
height: 200px; position: relative; border: 5px double ivory;
}
#vertical-center-transform p {
margin: 0; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
विधि D: फ्लेक्सबॉक्स (आधुनिक और अनुशंसित)
पैरेंट एलिमेंट पर display: flex सेट करें और फिर इसे सेंटर करने के लिए align-items और justify-content का उपयोग करें:
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
निष्कर्ष
ये आपके लेआउट में एलिमेंट्स को सेंटर करने की समस्या को हल करने के सबसे सामान्य तरीके हैं। फ्लेक्सबॉक्स विधि आधुनिक ब्राउज़र्स के लिए सबसे मजबूत और अनुशंसित दृष्टिकोण है, जबकि ट्रांसफॉर्म विधि तब अच्छी तरह से काम करती है जब फ्लेक्सबॉक्स उपयुक्त नहीं होता है।
