Search code examples
htmlcssinternet-explorerflexboxcentering

Display flex is not working in IE

I'm trying to do the center alignment for the image in <div class="product-image-area"> using display:flex;

That is working fine on Edge, Firefox and Chrome but not on IE.

CSS:

.horizontal {
    display: flex;
    justify-content: center;
}

.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Fiddle Here: JS Fiddle

Result in Edge,chrome and Firefox enter image description here

Result in IE

enter image description here

Solution

  • Removed img-responsive CSS class from img and added vertical 

    .horizontal {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.vertical {
  vertical-align: middle;
  max-height: 150px;
  max-width: 100%;
}

    updated Fiddle Here