HTML <center> टैग: टेक्स्ट सेंटर अलाइन (अप्रचलित)

HTML <center> टैग

<center> टैग अपने अंदर के कंटेंट को क्षैतिज रूप से केंद्र (center-align) करता था।

⚠️ अप्रचलित: <center> टैग HTML5 में समर्थित नहीं है। CSS text-align: center या Flexbox/Grid का उपयोग करें।

पुराना उदाहरण (केवल संदर्भ)

<!DOCTYPE html>
<html>
<head>
  <style> table, th, td { border: 2px solid blue; } </style>
</head>
<body>
  <table>
    <center>बजट गणना टेबल</center>
    <caption>खर्च</caption>
    <tr><th>डोमेन</th><th>लागत</th></tr>
    <tr><td>उत्पाद विकास</td><td>500000</td></tr>
    <tr><td>मार्केटिंग</td><td>500000</td></tr>
    <tr><td>सेवाएं</td><td>100000</td></tr>
    <tr><td>सपोर्ट</td><td>100000</td></tr>
    <tr><td>रखरखाव</td><td>100000</td></tr>
    <tr><td colspan="2">कुल बजट = INR 1300000</td></tr>
  </table>
</body>
</html>

आधुनिक CSS विकल्प

टेक्स्ट सेंटर करने के लिए

.center-text { text-align: center; }
<p class="center-text">केंद्रित टेक्स्ट</p>

ब्लॉक एलिमेंट सेंटर करने के लिए

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;  /* चौड़ाई आवश्यक */
}

Flexbox से सेंटर (आधुनिक)

.center-flex {
  display: flex;
  justify-content: center;  /* क्षैतिज */
  align-items: center;      /* लंबवत */
}

Grid से सेंटर

.center-grid {
  display: grid;
  place-items: center;
}

टेबल कैप्शन सेंटर (उदाहरण में "बजट गणना टेबल" के लिए)

caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px;
}

क्यों अप्रचलित?

प्रस्तुति (presentation) और संरचना (structure) का मिश्रण
CSS अधिक लचीला, मेंटेनेबल, रिस्पॉन्सिव
सेमेंटिक HTML सिद्धांतों का उल्लंघन