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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Aug, 2022
Like Article
Save Article