显示 flex 在 IE 中不起作用

Question

我正在尝试使用 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;
}

Fiddle 这里: JS Fiddle

Edge、chrome 和 Firefox 中的结果

IE 中的结果

Answer 1

只有 IE 11 部分支持 flexbox。

在 IE 上，您可以将 display: table; 用于 parent，将 display: table-cell; 用于 children 以及 vertical-align: middle;

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

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

Answer 2

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

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

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

已更新Fiddle Here

显示 flex 在 IE 中不起作用

Display flex is not working in IE

html

css

internet-explorer

centering

flexbox