显示flex在IE中不起作用

Question

我正在尝试使用Drop_Table_Test

在<div class="product-image-area">中对图像进行居中对齐

这在Edge，Firefox和Chrome上运行良好，但在IE上却没有。

CSS ：

display:flex;

小提琴：JS Fiddle

Edge，chrome和Firefox的结果

IE中的结果

Answer 1

只有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;
}

Answer 2

从img-responsive移除了img CSS类，并添加了vertical

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

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

更新Fiddle Here