html - 对齐元素 : center makes img disappear

Question

因此对于网格，当我没有 align-items: center; 时，img 显示正常，但是一旦我添加 align-items: center; 它突然消失。是什么导致了这个问题？

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}

<div class="grid">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

<div class="grid align">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

这似乎是 Chrome 的问题。它也无法在 Firefox 上正确安装 img。

Answer 1

这是因为百分比高度在浏览器中呈现的方式。

当 align-items: center 不存在时，align-items: stretch(默认值)生效。这会自动为 flex 元素(div)提供全高。

但是当 align-items: center 存在时，它会垂直居中 div。 div 的子元素 img 具有 max-height: 100%，实际上计算为 height: auto，因为没有高度引用在父级(div flex 元素)上。

通过在 flex 元素上设置高度解决了这个问题。

.grid > div {
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
  border: 1px solid red;
}

.grid>div {
  height: 100%;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}

<div class="grid">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>
<br><br>
<div class="grid align">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

更多细节在这里:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent