顯示Flex是不是在IE

Question

使用display:flex;

即工作邊做工精細，我試圖做的圖像居中對齊在<div class="product-image-area">，Firefox和Chrome，但不是在IE瀏覽器。

CSS：

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

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

小提琴這裏：在邊緣，鍍鉻JS Fiddle

結果和Firefox

結果在IE

Answer 1

刪除img-responsive CSS類從img並添加vertical

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

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

更新Fiddle Here

Answer 2

只有IE 11部分支持flexbox。

在IE瀏覽器就可以使用兒童display: table;爲家長和display: table-cell;與vertical-align: middle;

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

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