1

So, i'm triyng´to vertically center 2 divs with flexbox, it centers on all major browsers but it doesn't center properly on IE11.

Searching about this i found that there's a problem centering divs with min-height, but i'm not using it, so i don't know what is wrong or missing.

JSFiddle

.container {
  position: relative;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
}

.prev {
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.8);
  position: absolute;
  left: 30px;
}

.next {
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.8);
  position: absolute;
  right: 30px;
}
 <div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg">
  <div class="prev"></div>
  <div class="next"></div>
</div>
Gabriel Souza
  • 965
  • 5
  • 16
  • 36
  • 1
    When you apply absolute positioning to an element, you remove it from the document flow. When this element happens to be a child in a flex container, you remove it from flex layout. In short: Absolutely positioned children of a flex container ignore flex properties. – Michael Benjamin Jan 12 '18 at 17:52
  • See also: [Absolutely positioned flex item is not removed from the normal flow in IE11](https://stackoverflow.com/q/32991051/3597276) – Michael Benjamin Jan 12 '18 at 17:53
  • Just use CSS positioning properties: https://stackoverflow.com/q/35871294/3597276 – Michael Benjamin Jan 12 '18 at 17:55

1 Answers1

0

You can remove the flexbox rules, and instead vertically center your divs using transform...

fiddle

.container {
  position: relative;
}

img {
  max-width: 100%;
  display: block;
  /* added */
}

.prev,
.next {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .8);
  position: absolute;
}

.prev {
  left: 30px;
}

.next {
  right: 30px;
}
<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg">
  <div class="prev"></div>
  <div class="next"></div>
</div>

Alternatively, if you want to keep the flexbox rules, you can add top, bottom and margin properties to satisfy IE.

fiddle

.container {
  position: relative;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
  display: block; /* added */
}

.prev,
.next {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .8);
  position: absolute;
}

.prev {
  left: 30px;
}

.next {
  right: 30px;
}
<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg">
  <div class="prev"></div>
  <div class="next"></div>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59