forum

home / developersection / forums / align image in middle (vertical) of a div with css

Ask Question
Utpal Vishwas

Student

I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Message
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

26-Apr-2023

To align an image vertically in the middle of a div with CSS, you can use the `display` and `align-items` properties.

Here's an example:

Html:

<div class="container">
 <img src="your-image.jpg" alt="Your Image">
</div>

CSS:

.container {
 display: flex;
 align-items: center;
 justify-content: center; /* optional */
 height: 400px; /* set the height of the container */
}
.container img {
 max-width: 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-width: 100%` property on the image ensures that the image scales properly with the container.

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy