छवियों और अन्य HTML वस्तुओं को केंद्र में रखने के लिए CSS का उपयोग कैसे करें

सीएसएस तत्वों को केंद्र में रखने का सबसे अच्छा तरीका है, लेकिन वेब डिज़ाइनरों को शुरू करने के लिए यह एक चुनौती हो सकती है क्योंकि इसे पूरा करने के कई तरीके हैं। यह लेख बताता है कि टेक्स्ट, टेक्स्ट के ब्लॉक और इमेज के बीच में सीएसएस का इस्तेमाल कैसे किया जाता है।

सीएसएस के साथ पाठ केंद्रित करना

किसी पृष्ठ पर टेक्स्ट को केंद्र में रखने के लिए आपको केवल एक शैली गुण जानने की आवश्यकता है:

केंद्र {
पाठ-संरेखण: केंद्र;
}

CSS की इस पंक्ति के साथ, .center वर्ग के साथ लिखा गया प्रत्येक अनुच्छेद उसके मूल तत्व के अंदर क्षैतिज रूप से केंद्रित होगा। उदाहरण के लिए, एक डिवीजन के अंदर एक पैराग्राफ (उस डिवीजन का एक बच्चा) क्षैतिज रूप से अंदर केंद्रित होगा।

HTML दस्तावेज़ में लागू इस वर्ग का एक उदाहरण यहां दिया गया है:

यह पाठ केंद्रित है।

टेक्स्ट-एलाइन प्रॉपर्टी के साथ टेक्स्ट को केंद्रित करते समय, याद रखें कि यह इसके युक्त तत्व के भीतर केंद्रित होगा और जरूरी नहीं कि पूरे पृष्ठ के भीतर ही केंद्रित हो।

सीएसएस के साथ सामग्री के ब्लॉकों को केन्द्रित करना

सामग्री के ब्लॉक HTML का उपयोग करके बनाए जाते हैं।

केंद्र {
मार्जिन: ऑटो;
चौड़ाई: 80em;
}

मार्जिन प्रॉपर्टी के लिए यह सीएसएस शॉर्टहैंड शीर्ष और निचले मार्जिन को 0 के मान पर सेट करेगा, जबकि बाएं और दाएं "ऑटो" का उपयोग करेंगे। यह अनिवार्य रूप से उपलब्ध किसी भी स्थान को लेता है और इसे व्यूपोर्ट विंडो के दोनों किनारों के बीच समान रूप से विभाजित करता है, प्रभावी रूप से तत्व को केंद्रित करता है पन्ना।

यहां इसे HTML में लागू किया गया है:

यह पूरा ब्लॉक केंद्रित है,
लेकिन इसके अंदर का पाठ संरेखित छोड़ दिया गया है।

जब तक आपके ब्लॉक की एक परिभाषित चौड़ाई है, तब तक यह खुद को युक्त तत्व के अंदर केंद्रित करेगा। उस ब्लॉक में निहित पाठ इसके भीतर केंद्रित नहीं होगा, लेकिन वाम-औचित्य होगा। ऐसा इसलिए है क्योंकि वेब ब्राउज़र में टेक्स्ट को डिफ़ॉल्ट के रूप में छोड़ दिया जाता है। यदि आप पाठ को भी केन्द्रित करना चाहते हैं, तो आप विभाजन को केन्द्रित करने के लिए इस पद्धति के संयोजन के साथ पहले कवर किए गए पाठ-संरेखण गुण का उपयोग कर सकते हैं।

सीएसएस के साथ छवियों को केंद्रित करना

हालांकि अधिकांश ब्राउज़र एक ही टेक्स्ट-एलाइन प्रॉपर्टी का उपयोग करके केंद्रित छवियों को प्रदर्शित करेंगे, यह W3C द्वारा अनुशंसित नहीं है। इसलिए, इस बात की संभावना हमेशा बनी रहती है कि ब्राउज़र के भविष्य के संस्करण इस पद्धति को अनदेखा कर सकते हैं।

छवि को केंद्र में रखने के लिए टेक्स्ट-एलाइन का उपयोग करने के बजाय, आपको ब्राउज़र को स्पष्ट रूप से बताना चाहिए कि छवि एक ब्लॉक-स्तरीय तत्व है। इस तरह, आप इसे किसी अन्य ब्लॉक की तरह केन्द्रित कर सकते हैं। ऐसा करने के लिए यहां सीएसएस है:

img.केंद्र {
प्रदर्शन क्षेत्र;
मार्जिन-बाएं: ऑटो;
मार्जिन-दाएं: ऑटो;
}

और छवि को केंद्रित करने के लिए यहां HTML है:

आप इनलाइन सीएसएस (नीचे देखें) का उपयोग करके वस्तुओं को केंद्र में रख सकते हैं, लेकिन इस दृष्टिकोण की अनुशंसा नहीं की जाती है क्योंकि यह आपके HTML मार्कअप में दृश्य शैलियों को जोड़ता है। याद रखें, शैली और संरचना अलग होनी चाहिए; एचटीएमएल में सीएसएस शैलियों को जोड़ने से वह अलगाव टूट जाएगा और इस तरह, जब भी संभव हो, आपको इससे बचना चाहिए।

सीएसएस के साथ तत्वों को लंबवत रूप से केंद्रित करना

वेब डिज़ाइन में वस्तुओं को लंबवत रूप से केंद्रित करना हमेशा चुनौतीपूर्ण रहा है, लेकिन इसका विमोचन सीएसएस लचीला बॉक्स लेआउट मॉड्यूल CSS3 में इसे करने का एक तरीका प्रदान करता है।

लंबवत संरेखण ऊपर कवर किए गए क्षैतिज संरेखण के समान काम करता है। सीएसएस संपत्ति लंबवत-संरेखण है, जैसे:

.vcenter {
लंबवत-संरेखण: मध्य;
} 

सभी आधुनिक ब्राउज़र इस सीएसएस शैली का समर्थन करें. यदि आपको पुराने ब्राउज़र में समस्या है, तो W3C अनुशंसा करता है कि आप टेक्स्ट को एक कंटेनर में लंबवत रूप से केन्द्रित करें। ऐसा करने के लिए, तत्वों को एक युक्त तत्व के अंदर रखें, जैसे कि a डिव, और उस पर न्यूनतम ऊंचाई निर्धारित करें। युक्त तत्व को तालिका कक्ष के रूप में घोषित करें, और लंबवत संरेखण को "मध्य" पर सेट करें।

उदाहरण के लिए, यहाँ सीएसएस है:

.vcenter {
न्यूनतम ऊंचाई: 12em;
प्रदर्शन: टेबल-सेल;
लंबवत-संरेखण: मध्य;
}

और यहाँ एचटीएमएल है:

यह टेक्स्ट बॉक्स में लंबवत केंद्रित है।

वर्टिकल सेंटरिंग और इंटरनेट एक्सप्लोरर के पुराने संस्करण

आप इंटरनेट एक्सप्लोरर (आईई) को केंद्र में ला सकते हैं और फिर सशर्त टिप्पणियों का उपयोग कर सकते हैं ताकि केवल आईई शैलियों को देख सके, लेकिन वे थोड़ा वर्बोज़ और अप्रभावी हैं। Microsoft के 2015 के लिए समर्थन छोड़ने का निर्णय IE. के पुराने संस्करण, हालांकि, यह एक गैर-मुद्दा बना देगा क्योंकि IE उपयोग से बाहर हो गया है।