环绕文本时将图像向上推

Question

我需要一些帮助来防止下面的一些文本和图像在包装时向上推图像。请参阅所附图片以最好地理解我在说什么。目标是让所有图标水平排列，并使“This Text Is”与“Some Text”和“More Text”对齐。“更长”应该低于其他所有内容。

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

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

这是我用来创建固定宽度列的 CSS：

  .icon {
    display: inline-block;
    width: 150px;
  }

似乎“显示：内联块”是导致问题的原因，但是如果我将其更改为“内联”，图标 div 将失去它们的固定宽度。使用边距、填充或定位来移动被向上推回的图标不是一个有效的解决方案，因为这会变得混乱。总共有 10 个图标，图标 div 宽度根据浏览器宽度而变化（这使得文本根据浏览器宽度在不同的点换行）。我希望有一个简单的 CSS 解决方案，例如“垂直对齐”（不起作用）。

任何帮助将不胜感激。

Answer 1

你说垂直对齐不起作用。这应该对齐与顶部具有相同高度的图像：

.icon {
  vertical-align: top;
}