Centering image inside flexbox

HTML & CSS
1

How would I center the image (vertically and horizontally) inside flexbox item.

2

Aligning Items in a Flex Container

Have you tried something like this yet…

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box img {
  width: 100px;
  height: 100px;
}

<div class="box">
  <img>
</div>
1 Like
3

That worked but why did you have to assign specific width and height?

4

How do you prevent this image of distorting while browser window shrinks?

5

I think we went over responsive images in one of your other threads.

The image would go in it’s own container with a fluid width, with max-width and height auto on the image.

Then you should be able to center that container in the flex box.

But yes, your right, that example above was for a fixed dimension image.

So for a responsive image centered in a flex item it would go like this.

<div class="box">
    <div class="imgwrap">
        <img>
    </div>
</div>


.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgwrap {
   width: 50%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   width: 100%;
   max-width: 500px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}

And all that would depend on whether or not the parent .box has enough space to actually make the image appear centered each way. If not enough space it would look like a div wrapped tight around an image.

2 Likes
6

You can eliminate that extra wrapping div around the image by setting those properties on the image itself.

In that case you would really only be using flex to vertically center the image.

Width + min/max widths + auto margins on the img would then just need flex to vertically center it.

Drag your browser window all around with the following code and you will see what I meant above when I said…

“And all that would depend on whether or not the parent .box has enough space to actually make the image appear centered each way.”


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Flex Item Image</title>
<style>
.box {
   width:80%;
   min-height:80vh;
   margin:auto;
   border:1px solid;
   display: flex;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
}
.box img {
   display: block;
   width: 80%;
   min-width:100px;
   max-width: 350px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}
</style>

</head>
<body>

<div class="box">
   <img src="http://via.placeholder.com/350x250" width="350" height="250" alt="missing image">
</div>

</body>
</html>
1 Like
7

In this case margin auto on the flex item (the image) will center both vertically and horizontally without the need for justify and align on the parent. :slight_smile:

5 Likes
8

I was able to adjust my code based on your first example. The only problem that I am finding is that box (div)that holds the image is becoming taller as the browser windows shrink.

9

If there’s a solution available we would need to see the code your working with in order to find it.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.