img tag ignoring vertical align middle rule when it's in a flexbox container

Question

I need to simply vertically center an img in a div...however, the main parent is a flex and ignores vertical align middle, as well as justify content and align self rules.

Consider the situation below:

.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.box {
  border: 2px solid red;
  height: 500px;
  
  display: table-cell;
  vertical-align: middle;
}

<div class="flex-box">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
</div>

Answers such as Why I can't set vertical-align middle for img tag and How to vertically center an image inside of a div element in HTML using CSS? aren't helpful because flexbox is not involved.

When I do:

.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.box {
  border: 2px solid red;
  height: 500px;
  
  display: table-cell;
  vertical-align: middle;
}

.box img {
align-self: center;
}

<div class="flex-box">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
</div>

here I was expecting align-self: center to do it. but for some reason it doesn't https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

How do you vertically center an image, an a div, where the main parent is flexbox?

Even though you have set the display to `table-cell` this is not actually taking effect. The computed value is `block` inside a flex container. — Paulie_D, Aug 06 '21 at 18:01

score 1 · Accepted Answer · answered Aug 06 '21 at 17:55

1

You can make your .box display flex as well and add align-items: center. No need for vertical align middle. Your align self will not work because your .box is not displayed as flexbox.

answered Aug 06 '21 at 17:55

paulhenry

111
5

score 0 · Answer 2 · answered Aug 06 '21 at 18:10

0

Please change the display property of wrapper div to "table". Then vertical-align will work.

answered Aug 06 '21 at 18:10

F.E

688
6
10

img tag ignoring vertical align middle rule when it's in a flexbox container

2 Answers2