Skip to content
Related Articles

Related Articles

HTML | DOM Style verticalAlign Property
  • Last Updated : 02 Aug, 2019

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:

ValueDescription
lengthIt 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.
baselineIt is the default property, which is used to align the baseline of the element with the baseline of the parent element.
subIt is used to align the element as a subscript.
superIt is used to align the element as a superscript.
topIt is used to align the top of the element with the top of the tallest element on the line.
text-topIt is used to align the top of the element with the top of the parent element’s font.
middleIt is used to place the element in the middle of the parent element.
bottomIt is used to align the bottom of the element, with the lowest element on the line.
text-bottomIt is used to align the bottom of the element with the bottom of the parent element’s font
initialIt is used to set VerticalAlign property to its default value.
inheritIt 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






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

Output:

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

Example-2: Showing top property




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

Output:

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

Example-3: Showing baseline property




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

Output:

Before clicking on the button:

After clicking on the button:

Example-4: Showing initial property




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

Output:

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

Example-5: Showing inherit property




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

Output:

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

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
    My Personal Notes arrow_drop_up
Recommended Articles
Page :