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 Make the CSS vertical-align Property Work on the div Element?
This article will let you understand the vertical-align property in CSS. Here, we discuss the limitations of the vertical-align property and a few methods to overcome this, and hence, you will learn the solution to make the vertical-align property work on a div tag.
Syntax
vertical-align: value;
Why does vertical-align don't work on div elements?
Remember, the vertical-align property only works on inline, inline-block, and table-cell elements. You cannot use it to align block-level elements vertically.
Tables work differently than divs because all the rows in a table are the same height. If a cell doesn't have much content, the browser makes it look nice by adding space around the content to center it. Because div is a block-level element, the vertical-align property doesn't work by nature.
Purpose of vertical-align in CSS
The vertical-align property helps in two ways
- It can move an inline element, like an image, up or down in a line of text.
- It can also place content in the middle of a table cell.
Method 1: Using CSS Flexbox
Flexbox is a way to organize things on a page, putting them in rows or columns. It provides flexible alignment options including vertical centering.
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.content {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Vertically Centered Content</div>
</div>
</body>
</html>
A green box with white text "Vertically Centered Content" appears perfectly centered both horizontally and vertically within a gray container.
Method 2: Using CSS Grid
CSS Grid layout provides another effective way to center content vertically and horizontally ?
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
place-items: center;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Grid Centered Content</div>
</div>
</body>
</html>
A blue box with white text "Grid Centered Content" appears centered within a gray container using CSS Grid.
Method 3: Using Absolute Positioning
Absolute positioning with transform allows precise vertical centering ?
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FF9800;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Absolutely Positioned</div>
</div>
</body>
</html>
An orange box with white text "Absolutely Positioned" appears centered within a gray container using absolute positioning.
Method 4: Using Display Table-Cell
This method makes the vertical-align property work by changing the display type to table-cell ?
<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.table-content {
background-color: #9C27B0;
color: white;
padding: 20px;
border-radius: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div class="table-container">
<div class="table-content">Table-Cell Alignment</div>
</div>
</body>
</html>
A purple box with white text "Table-Cell Alignment" appears centered within a gray container using table-cell display.
Conclusion
While the vertical-align property doesn't work directly on div elements, we can achieve vertical centering using modern CSS techniques like Flexbox and Grid, or by changing the display type to table-cell. Flexbox and Grid are the most recommended approaches for modern web development.
1K+ Views
