Html 如何使用图像和文本修复flex box上的对齐

我有一个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中使用以下行：

* {
  padding: 0;
  margin: 0;
}

---

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

您确定要以列而不是行的形式显示产品吗？啊，抱歉，它们在移动设备上以列的形式显示，但稍后在媒体查询中以行的形式显示。它们的位置正确，只是当下面的文本有多行时，图像会稍微向上推

* {
  padding: 0;
  margin: 0;
}