CODEWITHSUNDEEP
htmlcssinternet-explorerflexboxcentering
Maria Jeysingh Anbu
Maria Jeysingh Anbu

Reputation: 3312

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

Upvotes: 3

Views: 5025

Answers (2)

Maria Jeysingh Anbu
Maria Jeysingh Anbu

Reputation: 3312

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

Upvotes: 4

MohammadReza Mahmoudi
MohammadReza Mahmoudi

Reputation: 1324

Only IE 11 has partial support for flexbox.

On IE you can use display: table; for parent and display: table-cell; for children with vertical-align: middle;

.horizontal {
  display: table;
  width: 100%;
  text-align: center;
}

.vertical {
  display: table-cell;
  vertical-align: middle;
}

Upvotes: 3

Related Questions