align-items:center让img消失

时间:2017-11-14 00:20:33

标签: html css css3 css-grid

因此,对于网格,当我没有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。

1 个答案:

答案 0 :(得分:3)

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

align-items: center不存在时,align-items: stretch(默认值)生效。这会自动给出弹性项目(div)全高。

但是当align-items: center存在时,它会垂直居中于div。 div的子项imgmax-height: 100%实际上计算为height: auto,因为父级没有高度引用(div flex项目)。

通过在弹性项目上设置高度来解决问题。

.grid > div {
  height: 100%;
}

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

此处有更多详情: