最稳的同行+垂直居中方案是 display: flex，需父容器设 flex 且有可计算高度；常见错误是父容器未启用 flex 或高度塌陷；推荐用 gap 替代 margin，避免 margin: auto 与 align-items 冲突。
用 display: flex 实现最稳的同行+垂直居中
这是当前最推荐、兼容性好、逻辑清晰的方案，但必须满足两个前提：父容器设 display: flex，且有可计算的高度（比如被内容撑开，或明确写了 height/min-height）。
常见错误现象：align-items: center 写了但没效果——大概率是父容器没启用 flex，或者父容器高度塌陷（例如只写了 width，内部又没内容，导致高度为 0）。
- 文字和图片都作为直接子元素，无需额外包裹
<div>或<span> - 加
gap: 8px比用margin控制间距更安全，不会干扰对齐 - 若文字过长，默认不换行，可能溢出；可给文字容器加
flex: 1或设white-space: normal - 避免同时写
margin: auto，尤其在 Safari 中会与align-items冲突，导致上下偏移
vertical-align: middle 仅适用于行内流场景
当图片和文字都是原生行内元素（<img> + <span> 或纯文本），且你不想改变文档流时，可用这个方案。但它对上下文非常敏感。
容易踩的坑：<img> 默认按基线（baseline）对齐，不加 vertical-align 就会“吊”在文字下方；另外，font-size、line-height、父容器 padding 都会影响最终视觉位置。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: inline-block或保持原生行内状态，不能是block -
vertical-align: middle的“middle”是指行框中线，不是父容器中线，所以它只管行内对齐，不管容器高度 - 建议父容器设
font-size: 0消除空格占位，再单独给文字设字号 - 图片加载失败时若没设宽高，会导致行高塌陷，文字“跳动”，应始终声明
width和height
别用 float 做图文同行布局
float 不是布局工具，而是文本环绕机制。强行用它让图文同行，后续必须清除浮动，且无法真正控制垂直对齐——vertical-align 对浮动元素无效，align-items 也不起作用。
实际开发中，只要看到 float: left + float: right 并排图文，基本意味着维护成本高、响应式难适配、可访问性差。
- 浮动元素脱离文档流，父容器高度常塌陷，需额外加
overflow: hidden或伪元素清除 - 没有垂直居中能力，只能靠
margin或padding“凑”，不同字体/字号下极易错位 - Flex/Grid 已成标准多年，继续用 float 属于主动给自己埋坑
图片下方多出空白间隙？先查 display 类型
这是图文同行中最隐蔽却高频的问题：明明写了 vertical-align: middle，图片下面还是有一条小缝隙。根源是 <img> 默认是 inline 元素，会保留基线以下的留白空间。
解决方式不是调 margin-bottom: -4px 这类 magic number，而是从显示类型入手：
- 最干净解法：给
<img>加display: block，彻底脱离行内流（适合单图+文字组合） - 若必须保留在行内流中（比如图标+文字按钮），则必须配
vertical-align: middle或top/bottom - 不要依赖
line-height: 0或font-size: 0治标不治本，它们会影响文字渲染 - 检查 computed styles，确认图片是否被其他规则（如 normalize.css）重置了
vertical-align
flex 方案覆盖 95% 场景，剩下 5% 是 legacy 系统或极简静态页——但即便如此，也优先考虑 vertical-align 而非 float。真正麻烦的从来不是写法本身，而是忘记检查父容器是否真成了 flex 容器、是否有高度、图片是否加载完成就参与布局。 
