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
<!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 below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 4
- Safari 1