如何修复带有图像和文本的柔性框上的对齐

Question

我有一个flexbox，里面有一些产品，这些产品由一个图像和一些文本组成。问题是，任何有一行以上文本的产品都会出现图像稍微高于其他产品的问题。

你知道怎么解决这个问题吗？

我的代码低于

<div class='imggrid'>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>Product Title</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>Product Title with More Words</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
</div>

css

.imggrid {
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0 auto;
}
.imggrid img {
margin-bottom: 1.5rem;
}

Answer 1

您是否在css中使用以下行：

* {
padding: 0;
margin: 0;
}

这将有助于清除一些默认填充