Question

我正在尝试垂直对齐具有最小高度的flexbox容器内的一些文本，并且除了在ie11中内容不居中的情况下它运行良好。

.banner {
  background:#ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction:column;
}

<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
    <span>IE is bobbins</span>
</div>

我浏览了一下，有类似问题的人建议adding a height will fix the issue，但显然这会否定min-height所以它不是很有用。

有没有人知道如何使垂直居中工作，即使用最小高度？

Answer 1

如果您愿意检测并将不同的CSS应用于ie11，您可以执行以下操作：

fiddle

＆＃13;

.banner {
  background: #ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction: column;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .banner span {
    display: table-cell;
    min-height: 60px;
    vertical-align: middle;
  }
}

＆＃13;

<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
  <span>IE is bobbins</span>
</div>

＆＃13;

Answer 2

根据caniuse.com， CSS Flexible Box Layout Module 的已知问题下：

在IE10和IE11中，带有显示的容器：flex和flex-direction：如果，列将无法正确计算其弯曲儿童的大小容器具有最小高度但没有明确的高度属性。 See Bug

和

当最小高度为时，IE 11不会正确地垂直对齐项目用过的。 See Bug

需要声明明确的height属性。

参考： https://caniuse.com/#feat=flexbox

Answer 3

Chris Wright的这个修复可能有用： https://codepen.io/chriswrightdesign/pen/emQNGZ/

这是基于将flex-direction：column包含在flex-direction内的想法：row parent：

    .l-flex-parent {
      display:flex;
      flex-direction:row;

    }

IE flexbox垂直对齐中心和最小高度

3 个答案: