Html 包装文本时将图像向上推

我需要一些帮助，防止下面的一些文本和图像在包装时向上推图像。请看附件中的图片，以便更好地理解我所说的内容。目标是使所有图标水平排列，并使“此文本是”与“某些文本”和“更多文本”对齐。“Longer”应该在它自己的行中低于其他行

每个图标和文本都包装在各自的容器div中，如下所示：

  <div class = "icon">
    <a href = "#">
     <img src = "icon.png" />
     <h3>Some Text</h3>
   </a>
  </div>

似乎是“display:inline块”导致了这个问题，但是如果我将其更改为“inline”，图标div将丢失其固定宽度。使用边距、填充或定位将被上下推的图标移动不是一个有效的解决方案，因为这样会造成混乱。总共有10个图标，图标div宽度根据浏览器宽度而变化（这使文本根据浏览器宽度在不同点换行）。我希望有一个简单的CSS解决方案，比如“垂直对齐”（这不起作用）

任何帮助都将不胜感激

---

您可以将其包装在flex容器中 关于flex的好文章

。图标{
显示：内联块；
宽度：150px；
}
.container{display:flex}

---

您可以将其包装在flex容器中 关于flex的好文章

。图标{
显示：内联块；
宽度：150px；
}
.container{display:flex}

---

您说过垂直对齐不起作用。 这将使高度与顶部相等的图像对齐：

.icon {
  vertical-align: top;
}

---

你说垂直对齐不起作用。 这将使高度与顶部相等的图像对齐：

.icon {
  vertical-align: top;
}

---

您可以浮动容器中的图标，并使容器触发回流以包含图标

.icon {
    float: left;
    display: block;
}

.container {
    overflow: hidden;
}

---

您可以浮动容器中的图标，并使容器触发回流以包含图标

.icon {
    float: left;
    display: block;
}

.container {
    overflow: hidden;
}

---

垂直对齐：顶部；垂直对齐：顶部；其实就是这么简单。是的，伙计们，这绝对管用。我想我在照片上看到的是它，而不是div，这就是它以前不起作用的原因。谢谢其实就是这么简单。是的，伙计们，这绝对管用。我想我在照片上看到的是它，而不是div，这就是它以前不起作用的原因。谢谢谢谢你的回复。我经常使用flexbox，但在这种情况下垂直对齐要容易得多。感谢您的回复。我经常使用flexbox，但在这种情况下垂直对齐要容易得多。