How to Vertically Align an Image inside a DIV using CSS?
The images are widely used on the webpage. In addition to the horizontally aligning images, we also align the images vertically.
In this tutorial, we will learn to vertically align the image inside a div using CSS.
Using flexbox properties
The CSS flex property aligns the image vertically inside a div element. For this use align-items property to the div containing the image and add display:flex and set some width, height, and border to the div.
Example: Vertical-align the image using flexbox properties
Here in this program, we have vertically center-aligned the image inside div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
align-items: center;
border: 3px solid red;
display: flex;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<h2> vertically align the image in div</h2>
<div class="container">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/user/profile/picture/iamabhishek1622449489_profile.png" alt="image">
</div>
</body>
</html>
Output
Here is the output of the above program.
Using vertical-align property
Another way to vertical-align the is to use vertical-align property. We can use this property to align the image vertically. The values used for vertical-align are baseline, top, bottom, middle, text-top, text-bottom, sub, super, and length.
Example: Vertical align image using vertical-align property
In this example, we have used vertical-align: middle to align the image to the center of the div.
Conclusion
We have learned to vertical-align the image inside a div using CSS properties. We used CSS property such as vertical-align in the examples.
