एचटीएमएल डोम स्टाइल लंबवत संपत्ति संरेखित करें

HTML DOM स्टाइल वर्टिकल एलाइन प्रॉपर्टी एक HTML दस्तावेज़ में HTML तत्व की सामग्री के लंबवत संरेखण को लौटाती है और संशोधित करती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

वापस आ रहा है लंबवत संरेखित करें

object.style.verticalAlign

लंबवत संरेखण को संशोधित करना

object.style.verticalAlign = “value”

मान

यहाँ, मान हो सकता है -

मान	स्पष्टीकरण
प्रारंभिक	इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया।
उत्तराधिकारी	यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है।
लंबाई	किसी तत्व को किसी विशिष्ट लंबाई से बढ़ाना या घटाना।
प्रतिशत (%)	यह लाइन-ऊंचाई संपत्ति के प्रतिशत के संदर्भ में एक तत्व को बढ़ाता या घटाता है।
आधारभूत	यह किसी तत्व की आधार रेखा को उसके मूल तत्व की आधार रेखा के साथ संरेखित करता है।
उप	यह तत्व को सबस्क्रिप्ट के रूप में संरेखित करता है।
सुपर	यह तत्व को सुपरस्क्रिप्ट के रूप में संरेखित करता है।
शीर्ष	यह तत्व के शीर्ष को रेखा पर सबसे ऊंचे तत्व के शीर्ष के साथ संरेखित करता है।
पाठ-शीर्ष	यह तत्व के शीर्ष को पैरेंट के तत्व फ़ॉन्ट के शीर्ष के साथ संरेखित करता है।
मध्य	यह तत्व को मूल तत्व के मध्य में संरेखित करता है।
नीचे	यह तत्व के निचले हिस्से को लाइन पर सबसे निचले तत्व के साथ संरेखित करता है।
पाठ-नीचे	यह तत्व के निचले भाग को पैरेंट के तत्व फ़ॉन्ट के निचले भाग के साथ संरेखित करता है।

उदाहरण

आइए हम HTML DOM स्टाइल वर्टिकल एलाइन प्रॉपर्टी का एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   table {
      border: 2px solid #fff;
      height: 150px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
   }
</style>
</head>
<body>
<h1>DOM Style verticalAlign Property Example</h1>
<table>
<tr>
<td id="myTd">Table Data</td>
</tr>
</table>
<button onclick="add()" class="btn">Set verticalAlign</button>
<script>
   function add() {
      document.querySelector('td').style.verticalAlign = "top";
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम स्टाइल लंबवत संपत्ति संरेखित करें

“लंबवत संरेखित करें सेट करें . पर क्लिक करें टेक्स्ट के वर्टिकल अलाइनमेंट को एडजस्ट करने के लिए बटन -

एचटीएमएल डोम स्टाइल लंबवत संपत्ति संरेखित करें