图片和文字在Flex容器中错位的主因是图片默认inline导致基线对齐，解决关键是父容器设align-items: center且图片加display: block。
图片和文字在 Flex 容器里看起来“错位”，通常不是因为没加 align-items: center，而是默认的对齐方式（align-items: stretch）和文本基线（baseline）行为共同导致的——即使加了 center，如果图片是内联元素（比如没设 display: block），它仍会按基线参与对齐，而文字的基线在字母底部，图片则默认底部贴基线，视觉上就显得“偏下”。
确认 flex 容器已启用 center 对齐
确保父容器设置了：
display: flex-
align-items: center（垂直居中） - 可选但推荐：
justify-content: flex-start或其他，明确水平行为
让图片脱离基线对齐（关键一步）
图片默认是 display: inline，会受 vertical-align: baseline 影响。解决方法很简单：
- 给图片加
display: block—— 最直接，彻底退出行内布局，完全由 flex 控制对齐 - 或加
vertical-align: middle（仅当保留 inline 时用，但不如 block 稳定） - 避免只依赖
align-items: center而忽略图片自身的显示模式
检查文字是否有多余空白或换行
有时“不对齐”其实是文字前后有空格、换行符，或行高（line-height）过大造成视觉偏差：
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中文字节点是否有看不见的空白（如换行缩进）
- 尝试给文字容器设
font-size: 0父级再重置子元素字号（治标，慎用） - 更稳妥：统一控制
line-height: 1或与容器高度匹配
额外建议：用 gap + align-items 配合更可控
如果图文之间需要间距，优先用 gap 而非 margin：
-
gap: 0.5rem自动作用于 flex 项目之间，不影响对齐逻辑 - 避免给图片或文字单独加 margin-top/margin-bottom，容易破坏 center 效果
基本上就这些。核心就两点：flex 容器开 align-items: center，图片加 display: block。不复杂但容易忽略。
