3个带有标题和副标题的图标，根据标题对齐

Question

我连续三个图标，每个图标下面都有一个标题和一个副标题。我尝试做的是将标题对齐在同一行上，无论字幕有多大。我需要它在移动和桌面上工作。

这是我到目前为止所做的代码，但没有成功对齐它们。如果你能帮我用 flex 解决这个问题那就太好了

#join3icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--size-125);
  padding: 0 var(--size-125);
}

.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

<div id="join3icons">
  <div class="icon-box">
    <a href="."><img src="Easier.svg"></a>
    <span class="headline3">Einfacher</span>
    <span class="sub3iconsText">Auftragsverfolgung</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Faster.svg"></a>
    <span class="headline3">Schneller</span>
    <span class="sub3iconsText ">Checkout-Vorgang</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Earn.svg"></a>
    <span class="headline3">Besser</span>
    <span class="sub3iconsText ">Lorem Ipsum is simply dummy text</span>
  </div>
</div>

Answer 1

您需要提供照片的确切尺寸，因为左边的照片比其他照片大，这应该可以解决您的问题。

CSS：

img{
    height: 100px;
}

Answer 2

您可以通过使用 grid 而不是 flexbox 来实现

#join3icons {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

删除图标框 css 类和相应的 div，一切都按您的网格排序

根据您的需要，您可以自动替换 grid-template-rows 行中的 1fr，因此每行都有自己的高度。当然你也可以添加一个间隙

Answer 3

因为标题底部的文本是单行的，其余的是两行的，flex 降低了标题以补偿左侧的距离，因此它不适合一行。可以用grid，这样比较好处理，或者用一个size给底部的文字指定一个标题，例如：

.sub3iconsText {
    height: 40px;
}