HTML में आसपास के एलिमेंट्स के अनुसार संरेखण कैसे सेट करें?

HTML में एलिमेंट का संरेखण (alignment) सेट करने के लिए align विशेषता का उपयोग किया जाता था।

पुराना तरीका (केवल संदर्भ के लिए)

<!DOCTYPE html>
<html>
  <body>
    <p align="right">दाएं संरेखित पैराग्राफ।</p>
    <p><b>नोट:</b> align विशेषता HTML5 में समर्थित नहीं है। CSS का उपयोग करें।</p>
  </body>
</html>

आधुनिक तरीका: CSS का उपयोग करें

टेक्स्ट संरेखण

<style>
  .text-left    { text-align: left; }
  .text-center  { text-align: center; }
  .text-right   { text-align: right; }
  .text-justify { text-align: justify; }
</style>

<p class="text-left">बाएं संरेखित</p>
<p class="text-center">केंद्र संरेखित</p>
<p class="text-right">दाएं संरेखित</p>
<p class="text-justify">यह एक लंबा पैराग्राफ है जो दोनों तरफ संरेखित होता है। यह justify संरेखण का उदाहरण है।</p>

ब्लॉक एलिमेंट्स का क्षैतिज संरेखण

<style>
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
</style>

<div class="center-block" style="background: #f0f0f0; padding: 20px;">
  यह डिव केंद्र में संरेखित है।
</div>

Flexbox के साथ संरेखण (आधुनिक)

<style>
  .flex-container {
    display: flex;
    justify-content: center;  /* क्षैतिज */
    align-items: center;      /* लंबवत */
    height: 200px;
    border: 1px solid #ccc;
  }
</style>

<div class="flex-container">
  <div>केंद्र में संरेखित</div>
</div>

Grid के साथ संरेखण

<style>
  .grid-container {
    display: grid;
    place-items: center;
    height: 200px;
    border: 1px solid #ccc;
  }
</style>

सारांश