How to vertically align an image inside a div

Question

Aryan Kumar · Answer

To vertically align an image inside a div, you can use CSS flexbox or CSS table display properties.
Here's how to do it using CSS flexbox:
HTML:
andlt;div class="container">
 andlt;img src="your-image.jpg" alt="Your Image">
andlt;/div>
CSS:
.container {
 display: flex;
 align-items: center;
 justify-content: center; /* optional */
 height: 400px; /* set the height of the container */
}
.container img {
 max-height: 100%;
}
In the example above, the display: flex property is used to create a flex container, and
align-items: center is used to vertically align the image in the middle of the container.
If you want to horizontally center the image as well, you can use justify-content: center. Note that this property centers the contents horizontally, but only works if there is extra space in the container.
The height property of the container is set to a specific value to create a fixed height for the container. If you want the container to be flexible, you can remove this property.
The max-height: 100% property on the image ensures that the image scales properly with the container.

forum

How to vertically align an image inside a div

Utpal Vishwas

Can you answer this question?

1 Answers

Liked By