HTML | DOM Style verticalAlign Property
Last Updated : 05 Aug, 2022
This property is used to set or return the vertical alignment of the content in an element.
Syntax:
object.style.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
HTML <!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
HTML <!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
HTML <!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
HTML <!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
HTML <!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 below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 4
- Safari 1