align-items: center 使 img 消失
align-items: center makes img disappear
所以对于网格,当我没有 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。
这是因为百分比高度在浏览器中呈现的方式。
当 align-items: center
不存在时,align-items: stretch
(默认值)有效。这会自动给出弹性项目(div
)全高。
但是当 align-items: center
存在时,它将 div 垂直居中。 div 的子项,img
和 max-height: 100%
,实际上计算为 height: auto
,因为父项没有高度参考(div 弹性项目).
问题已通过在 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>
此处有更多详细信息:
所以对于网格,当我没有 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。
这是因为百分比高度在浏览器中呈现的方式。
当 align-items: center
不存在时,align-items: stretch
(默认值)有效。这会自动给出弹性项目(div
)全高。
但是当 align-items: center
存在时,它将 div 垂直居中。 div 的子项,img
和 max-height: 100%
,实际上计算为 height: auto
,因为父项没有高度参考(div 弹性项目).
问题已通过在 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>
此处有更多详细信息: