Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the vertical alignment of the content in an element with JavaScript?
In this tutorial, we will learn how to set the vertical alignment of the content in an element using JavaScript.
The verticalAlign property of the HTML DOM Style object controls how content is positioned vertically within inline, inline-block, and table-cell elements. This property is particularly useful for aligning text within table cells or positioning inline elements relative to their surrounding content.
Note that vertical-align only applies to inline, inline-block, and table-cell elements; it cannot be used to align block-level elements.
Syntax
element.style.verticalAlign = "value";
Common values include: top, middle, bottom, baseline, text-top, and text-bottom.
Using the verticalAlign Property with "top"
The top value aligns the element's top edge with the top of the tallest element on the line.
<html>
<head>
<style>
table {
border: 3px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>Set vertical alignment to top</h3>
<table>
<tr>
<td id="myTable">JavaScript is a high-level programming language.</td>
</tr>
</table>
<br>
<button type="button" onclick="myFunction()">Set to Top</button>
<script>
function myFunction() {
document.getElementById("myTable").style.verticalAlign = "top";
}
</script>
</body>
</html>
Using Multiple verticalAlign Values
Different elements can have different vertical alignment values. The middle value centers content vertically, while bottom aligns content to the bottom edge.
<html>
<head>
<style>
table {
border: 3px solid green;
width: 300px;
height: 150px;
}
th {
border: 1px solid gray;
padding: 10px;
}
</style>
</head>
<body>
<h3>Set vertical alignment using middle & bottom values</h3>
<table>
<tr>
<th id="cell1">Hi</th>
<th id="cell2">Hello</th>
</tr>
<tr>
<th id="cell3">Namaste</th>
<th id="cell4">How are you</th>
</tr>
</table>
<br>
<button type="button" onclick="alignCells()">Apply Alignment</button>
<script>
function alignCells() {
document.getElementById("cell1").style.verticalAlign = "middle";
document.getElementById("cell2").style.verticalAlign = "middle";
document.getElementById("cell3").style.verticalAlign = "bottom";
document.getElementById("cell4").style.verticalAlign = "bottom";
}
</script>
</body>
</html>
Vertical Alignment Values
| Value | Description | Use Case |
|---|---|---|
top |
Aligns to the top of the line | Headers, important content |
middle |
Centers vertically | Default table cell alignment |
bottom |
Aligns to the bottom | Footnotes, secondary content |
baseline |
Aligns to text baseline | Text alignment with images |
Using Bootstrap Classes
Bootstrap provides utility classes for vertical alignment that work with flexbox and table elements.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h3>Bootstrap vertical alignment utilities</h3>
<div class="container">
<div class="row align-items-center bg-success text-light" style="min-height: 150px">
<div class="col-md-12">
<span class="align-baseline">Hello</span>
<span class="align-top">This</span>
<span class="align-middle">is</span>
<span class="align-bottom">JavaScript</span>
<span class="align-text-top">Tutorials</span>
<span class="align-text-bottom">Point</span>
</div>
</div>
</div>
</body>
</html>
Conclusion
The verticalAlign property provides precise control over content positioning within inline and table elements. Use it for table cells, inline elements, or combine with Bootstrap classes for responsive layouts.
1K+ Views
