如何使用图像和文本修复 flex 框的对齐方式

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

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