HTML DOM Style verticalAlign Property

The HTML DOM style verticalAlign property returns and modify the vertical alignment of the content of an HTML element in an HTML document.

Syntax

Following is the syntax −

Returning verticalAlign

object.style.verticalAlign

Modifying verticalAlign

object.style.verticalAlign = “value”

Values

Here, value can be −

Value	Explanation
initial	It set this property value to its default value.
inherit	It inherits this property value from its parent element.
length	In increment or decrement an element by a specific length.
percentage(%)	It raises or lower an element in terms of percentage of line-height property.
baseline	It aligns the baseline of an element with the baseline of its parent element.
sub	It aligns the element as a subscript.
super	It aligns the element as a superscript.
top	It aligns the top of the element with the top of the tallest element on the line.
text-top	It aligns the top of the element with the top of the parent’s element font.
middle	It aligns the element in the middle of the parent element.
bottom	It aligns the bottom of the element with the lowest element on the line.
text-bottom	It aligns the bottom of the element with the bottom of the parent’s element font.

Example

Let us see an example of HTML DOM style verticalAlign property −

<!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>

Output

This will produce the following output −

HTML DOM Style verticalAlign Property

Click on “Set verticalAlign” button to adjust vertical alignment of text −

HTML DOM Style verticalAlign Property