सीएसएस के साथ अपने लेआउट को केंद्र में कैसे संरेखित करें

अपने वेबपेज लेआउट को सीएसएस के साथ केंद्र में संरेखित करने के दो अलग-अलग तरीकों के बारे में जानें।

मान लें कि आप अपनी वेबसाइट के लिए एक लेख लेआउट स्टाइल कर रहे हैं, और आप <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>

और निम्नलिखित सीएसएस घोषणा ब्लॉक:

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 . के समान कार्य करेगा घोषणा जो आपने पहले देखी थी।