Display-flex ist nicht im IE arbeitet

Question

Ich versuche, die zentrierte Ausrichtung für das Bild in <div class="product-image-area"> zu tun display:flex;

verwenden, die fein auf Edge arbeiten, Firefox und Chrome, aber nicht auf IE.

CSS:

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

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

Fiddle Hier: JS Fiddle

Ergebnis in Rand, Chrom und Firefox

Ergebnis in IE

Answer 1

entfernt img-responsive CSS-Klasse von img und hinzugefügt vertical

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

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

aktualisiert Fiddle Here

Answer 2

Nur IE 11 hat teilweise Unterstützung für flexbox.

Auf IE können Sie display: table; für Eltern und display: table-cell; für Kinder verwenden, um mit vertical-align: middle;

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

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