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

This question already has answers here:

flex container min-height ignored in IE

(3 个回答)


3年前关闭。




我正在尝试垂直对齐具有最小高度的 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，因此它不是很有用。

有谁知道一种让垂直居中工作的方法，即最小高度？

最佳答案

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

fiddle

.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;
  }
}

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

关于css - IE flexbox 垂直对齐中心和最小高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47179795/