CSS适配不同高度图片实现首行元素垂直对齐

推荐方案：Flex布局（兼容所有现代浏览器，无溢出、乱序问题） #

这是目前适配动态内容高度最稳定的方案，不会出现你之前尝试的几种方案的通病：

• 选中首行三列元素的共同直接父容器，添加如下样式：

.first-line-container {
  display: flex;
  align-items: center; /* 核心：所有直接子元素沿垂直方向居中对齐 */
  width: 100%;
  gap: 16px; /* 按需设置列间距，替代原有margin避免边距计算偏差 */
  flex-wrap: wrap; /* 窄屏自动换行，避免内容溢出 */
}

• 清除你之前给列元素、.p-c类添加的所有试验性样式：
  • 移除display: inline-block、height: 100%、vertical-align: middle
  • 移除position: relative、top: 50%、transform: translateY(-50%)
  • 移除所有position: absolute相关定位属性
  • 如果原有栅格列带float属性，统一添加float: none清除浮动
• 给首行内的图片添加适配规则，兼容任意原始尺寸的图片：

.first-line-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

降级兼容方案：table布局（兼容IE8+等老旧浏览器） #

如果需要兼容极老旧浏览器，可以用table布局实现，同样支持动态内容高度：

.first-line-container {
  display: table;
  width: 100%;
  border-spacing: 16px 0; /* 控制列间距 */
}
.first-line-col {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

之前尝试的方案失效原因说明 #

• inline-block+vertical-align: middle方案：该属性对齐基准是行内元素的文本基线，只要行内存在空白节点、元素高度不一致就会出现基准偏移，必须手动消除父容器所有空白、设置统一行高才能生效，容错率极低。
• 绝对定位方案：元素脱离正常文档流，必然会影响原有栅格的排列顺序，且无法被父元素自动感知高度，很容易出现内容溢出。
• top:50%+transform: translateY(-50%)方案：该方案要求父元素必须有明确的显式设置高度，当父元素高度被动态图片撑开时，百分比偏移计算值完全错误，无法实现居中。

效果示意

内容的提问来源于stack exchange，提问作者user16421