CSS का उपयोग करके टेक्स्ट अलाइनमेंट सेट करना

text-align प्रॉपर्टी

CSS में टेक्स्ट अलाइनमेंट सेट करने के लिए text-align प्रॉपर्टी का उपयोग करें।

संभावित मान:

text-align: left | right | center | justify | initial | inherit;

मान:

• left: बाएं अलाइन (LTR में डिफ़ॉल्ट)
• right: दाएं अलाइन
• center: केंद्र अलाइन
• justify: दोनों किनारों पर अलाइन (स्पेस एडजस्ट करके)
• start/end: लॉजिकल मान (RTL/LTR अनुकूल)
• match-parent: पैरेंट से विरासत (लॉजिकल)

उदाहरण 1: मल्टी-कॉलम में justify

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  columns: auto auto;
  text-align: justify;
}
</style>
</head>
<body>
<h1>मशीन लर्निंग</h1>
<div class="demo">
  आज का आर्टिफिशियल इंटेलिजेंस (AI) ब्लॉकचेन और क्वांटम कंप्यूटिंग के प्रचार से कहीं आगे निकल चुका है। यह इस तथ्य के कारण है कि विशाल कंप्यूटिंग संसाधन आम आदमी के लिए आसानी से उपलब्ध हैं। डेवलपर्स अब नए मशीन लर्निंग मॉडल बनाने और बेहतर प्रदर्शन और परिणामों के लिए मौजूदा मॉडल्स को री-ट्रेन करने में इसका लाभ उठाते हैं। हाई परफॉरमेंस कंप्यूटिंग (HPC) की आसान उपलब्धता के परिणामस्वरूप मशीन लर्निंग कौशल रखने वाले IT पेशेवरों की अचानक बढ़ी मांग हुई है।
</div>
</body>
</html>

उदाहरण 2: सेंटर अलाइनमेंट ग्रेडिएंट बैकग्राउंड के साथ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-variant: normal;
  text-align: center;
}
</style>
</head>
<body>
<h1>परीक्षा विवरण</h1>
<p class="demo">परीक्षा 20 दिसंबर को।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

text-align-last प्रॉपर्टी:

जस्टिफाइड टेक्स्ट की अंतिम लाइन को कंट्रोल करता है:

.justified {
  text-align: justify;
  text-align-last: center;  /* अंतिम लाइन सेंटर */
}

लॉजिकल मान (RTL सपोर्ट):

.logical {
  text-align: start;   /* LTR: left, RTL: right */
  text-align: end;     /* LTR: right, RTL: left */
}

वर्टिकल अलाइनमेंट (इंलाइन/टेबल सेल्स के लिए):

vertical-align: baseline | top | middle | bottom | text-top | text-bottom | sub | super | length | %;

सर्वोत्तम अभ्यास:

• बॉडी टेक्स्ट के लिए left (LTR) / start (लॉजिकल)
• हेडिंग्स/शीर्षकों के लिए center
• संकीर्ण कॉलम्स में justify से बचें (बड़े स्पेस गैप्स बनते हैं)
• text-justify: inter-word या inter-character से जस्टिफिकेशन सुधारें
• RTL सपोर्ट के लिए लॉजिकल मान (start/end) उपयोग करें