CSS के साथ अपने वेबपेज लेआउट को सेंटर अलाइन करने के दो अलग-अलग तरीके सीखें।
मान लीजिए आप अपनी वेबसाइट के लिए एक आर्टिकल लेआउट स्टाइल कर रहे हैं, और आप <article> एलिमेंट को अपने पेज के बीच में क्षैतिज रूप से सेंटर अलाइन करना चाहते हैं।
आप इसे कुछ तरीकों से कर सकते हैं। क्षैतिज रूप से एलिमेंट्स को सेंटर अलाइन करने का सबसे सरल, और क्लासिक दृष्टिकोण CSS प्रॉपर्टी margin का उपयोग करना है और इसके बाएं और दाएं मानों को auto पर सेट करना है।
आप मुफ्त कोडपेन एडिटर का उपयोग करके अनुसरण कर सकते हैं।
एक आर्टिकल लेआउट के लिए निम्नलिखित बुनियादी HTML मार्कअप लें:
<article> <h1>Title for your article</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut dignissimos, doloribus accusantium provident nemo a voluptatibus nihil recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto reprehenderit error. </p> </article>और निम्नलिखित CSS डिक्लेरेशन ब्लॉक:
article { max-width: 640px; margin-left: auto; margin-right: auto; }यह आपके आर्टिकल लेआउट को आपके वेबपेज के बीच में क्षैतिज रूप से सेंटर अलाइन करेगा।
max-width प्रॉपर्टी एलिमेंट्स को क्षैतिज रूप से सेंटर अलाइन करने के लिए आवश्यक है क्योंकि अन्यथा, टेक्स्ट स्वचालित रूप से आपके पेज के बाएं से दाएं किनारे तक फैल जाएगा।
फ्लेक्सबॉक्स के साथ क्षैतिज रूप से सेंटर अलाइन करें
आप आधुनिक flexbox प्रॉपर्टी का उपयोग करके भी सेंटर अलाइन कर सकते हैं। flexbox जिस तरह से चाइल्ड एलिमेंट्स को प्रॉपर्टीज़ पास करता है, उसके कारण अपने लेआउट को सेंटर अलाइन करने का सबसे सरल तरीका अपने <article> एलिमेंट को किसी अन्य एलिमेंट में लपेटना है, और फिर उस नए पैरेंट एलिमेंट में flexbox प्रॉपर्टीज़ जोड़ना है।
आइए पहले के आर्टिकल एलिमेंट को <main> एलिमेंट से लपेटें:
<main> <article> <h1>Title for your article</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut dignissimos, doloribus accusantium provident nemo a voluptatibus nihil recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto reprehenderit error. </p> </article> </main>और फ्लेक्सबॉक्स प्रॉपर्टीज़ (max-width नहीं) को article { } डिक्लेरेशन ब्लॉक से एक नए main { } ब्लॉक में ले जाएं:
main { display: flex; flex-direction: column; justify-content: center; align-items: center; } article { max-width: 640px; }यह ठीक उसी तरह काम करेगा जैसे आपने पहले margin: auto डिक्लेरेशन देखा था।
