Jeysingh Anbu Jeysingh Anbu - 3 months ago 6
CSS Question

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

Answer

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