显示 flex 在 IE 中不起作用答案

【问题标题】：Display flex is not working in IE显示 flex 在 IE 中不起作用
【发布时间】：2016-11-28 09:35:02
【问题描述】：

我正在尝试使用display:flex; 对<div class="product-image-area"> 中的图像进行中心对齐

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

CSS：

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

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

在这里提琴：JS Fiddle

Edge、chrome 和 Firefox 中的结果

在 IE 中的结果

【问题讨论】：

caniuse.com/#feat=flexbox
您可以尝试显示宽度为 % 的 inline-block
@JeysinghAnbu 你可以试试这个jsfiddle.net/ynk5ccmp/5
当你遇到IE问题时，你应该说什么版本。

标签： html css internet-explorer flexbox centering

【解决方案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;
}

【讨论】：

您的预期结果是什么？我在 IE10 上测试了这个，img 是垂直对齐的jsfiddle.net/ynk5ccmp/13
@Mohammed Reza，谢谢，现在宽度可以了。但是当我改变高度时，两者都是不同的高度。期望都在同一高度。我在这里附上了小提琴jsfiddle.net/ynk5ccmp/15
@JeysinghAnbu 你想要盒子或图片的高度相同吗？
图片高度相同

【解决方案2】：

从img 中删除img-responsive CSS 类并添加vertical

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

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

更新Fiddle Here

【讨论】：