HTML | DOM Style verticalAlign Property

This property is used to set or return the vertical alignment of the content in an element.

Syntax:

  • Return VerticalAlign :
    object.style.verticalAlign
  • Set VerticalAlign :
    object.style.verticalAlign = value

Properties:



Value Description
length It is used to raise or lower an element by some given length.
% It is used to raise or lower an element in percentage of the “line-height” property.
baseline It is the default property, which is used to align the baseline of the element with the baseline of the parent element.
sub It is used to align the element as a subscript.
super It is used to align the element as a superscript.
top It is used to align the top of the element with the top of the tallest element on the line.
text-top It is used to align the top of the element with the top of the parent element’s font.
middle It is used to place the element in the middle of the parent element.
bottom It is used to align the bottom of the element, with the lowest element on the line.
text-bottom It is used to align the bottom of the element with the bottom of the parent element’s font
initial It is used to set VerticalAlign property to its default value.
inherit It is used to inherit property values from its parent element.

Return Value: It is used to return a string, representing the vertical alignment of the content in an element.

Example-1: Showing bottom property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <head>
       HTML | DOM Style verticalAlign Property
    </head>
</head>
<body>
    <h1>
      <center>
       DOM VerticalAlign Property <button onclick="align()">Press
        </button>
      </center
  </h1>
  
   <h3>Clicking on the 'Press' button will align
     the text vertically at the bottom.</h3>
  
    <style>
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    </style>
  
    <table>
        <tr>
            <td id="myTd">
                <center>
                  <h1>GeeksforGeeks</h1>
              </center>
          </td>
  </tr>
</table>
<br>
  
<script>
function align() {
  
  // Set align bottom.
  document.getElementById(
    "myTd").style.verticalAlign=
    "bottom";
}
</script>
  
</body>
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: Showing top property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <head>
       HTML | DOM Style verticalAlign Property
    </head>
</head>
<body>
    <h1>
      <center>
      DOM VerticalAlign Property <button onclick="align()">Press
        </button>
      </center
  </h1>
  
    <h3>Clicking on the 'Press' button will
      align the text vertically at the top.</h3>
  
    <style>
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    </style>
  
    <table>
        <tr>
          <td id="myTd">
            <h1>
              <center>GeeksforGeeks</center>
            <h1>
          </td>
       </tr>
    </table>
    <br>
  
<script>
function align() {
    
  // Set align top.
  document.getElementById(
    "myTd").style.verticalAlign=
    "top";
}
</script>
  
</body>
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-3: Showing baseline property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <head>
       HTML | DOM Style verticalAlign Property
    </head>
</head>
<body>
    <h1>
      <center>
      DOM VerticalAlign Property <button onclick="align()">Press
        </button>
      </center
  </h1>
  
    <h3>Clicking on the 'Press' button will align the
      text vertically with the baseline of the parent.</h3>
    <style>
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    </style>
  
    <table>
        <tr>
            <td id="myTd">
                <h1>
                  <center>
                    GeeksforGeeks
                  </center>
                  <h1>
                </td>
  </tr>
</table>
<br>
  
<script>
function align() {
    
  // Set align baseline
  document.getElementById(
    "myTd").style.verticalAlign=
    "baseline";
}
</script>
  
</body>
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

Example-4: Showing initial property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <head>
       HTML | DOM Style verticalAlign Property
    </head>
</head>
<body>
    <h1>
      <center>
        DOM VerticalAlign Property <button onclick="align()">Press
        </button>
      </center>
  </h1>
  
  <h3>Clicking on the 'Press' button will align
    the text vertically to the initial position.</h3>
  
    <style>
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    </style>
  
    <table>
        <tr>
            <td id="myTd">
                <h1>
                  <center>
                    GeeksforGeeks
                  </center>
                  <h1>
                 </td>
             </tr>
       </table>
       <br>
   
<script>
function align() {
   
  // Set align initial
  document.getElementById(
    "myTd").style.verticalAlign=
    "initial";
}
</script>
  
</body>
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-5: Showing inherit property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <head>
       HTML | DOM Style verticalAlign Property
    </head>
</head>
<body>
    <h1>
      <center>
        DOM VerticalAlign Property <button onclick="align()">Press
        </button>
      </center
  </h1>
  
 <h3>Clicking on the 'Press' button will align the
   text vertically to the inherited position.</h3>
  
    <style>
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    </style>
  
<table>
     <tr>
        <td id="myTd">
             <h1>
               <center>
                 GeeksforGeeks
               </center>
              <h1>
            </td>
          </tr>
</table>
<br>
  
<script>
function align() {
    
  // Set align inherit 
  document.getElementById(
    "myTd").style.verticalAlign=
    "inherit";
}
</script>
  
</body>
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Browser Support: The browsers supported by DOM VerticalAlign Property are listed beliw: