CSS图文不对齐？flexbox轻松解决

• 添加 display: flex —— 启用 Flexbox
• 默认主轴是水平方向（flex-direction: row），适合图文并排
• 文字和图片自动成为 flex 项目，脱离传统行内对齐逻辑

控制垂直对齐：align-items

Flex 容器中，align-items 控制所有子项在交叉轴（这里是垂直方向）上的对齐方式：

• align-items: center —— 最常用，让图片和文字垂直居中对齐
• align-items: flex-start —— 顶部对齐
• align-items: flex-end —— 底部对齐
• 避免用 baseline（Flexbox 中不推荐，语义弱且行为不稳定）

处理文字换行或高度不一致

如果文字多行或图片尺寸大，可能需微调间距或拉伸行为：

• 加 align-items: flex-start + gap: 8px 明确留白
• 若想文字撑高容器并垂直居中，可设 height 或 min-height，再配合 align-items: center
• 图片加 flex-shrink: 0 防止被压缩（尤其在窄屏下）

一个实用小例子

HTML 结构：

  
  这是说明文字

CSS：

这样图文始终垂直居中，响应友好，也不依赖字体度量。

本篇关于《CSS图文不对齐？flexbox轻松解决》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！