vertical-align: middle 是修复行内图文错位最轻量直接的解法，它调整对齐参考线而不改变布局模型；display: flex 则通过父容器设 align-items: center 和 gap 彻底规避基线与空白问题。
图片和文字默认“不在同一行”不是因为写错了，而是浏览器把换行符、空格当成了真实字符，加上 img 默认是 inline 元素但对齐基线（baseline）留了下伸空间——所以看起来像错位、有缝、吊着。
用 vertical-align: middle 快速修复行内图文错位
这是最轻量、最直接的解法，适合图标+文字、按钮内嵌小图等场景。它不改布局模型，只调整对齐参考线。
-
vertical-align只对inline或inline-block元素生效；img默认就是inline，不用额外设 - 别写
vertical-align: baseline（默认值），那是问题源头；middle是最常用且视觉上最稳的选择 - 如果文字用了不同
line-height或字体，middle可能仍偏高/偏低，可微调为text-top或-2px这类具体值 - 示例：
<img src="icon.svg" style="vertical-align: middle;">设置成功
用 display: flex 彻底接管图文排列逻辑
当你需要控制间距、垂直居中、响应式换向（比如手机端改成上下排），flex 是唯一可靠路径。它绕开所有行内空白和基线陷阱。
- 必须加在**父容器**上，不是
img或文字本身；否则无效 -
align-items: center解决垂直对齐，“文字吊着”“图片浮高”全消失 - 用
gap控制图文间距，比分别写margin更干净，且不会因顺序变化导致漏掉某一边 - 图片加
flex-shrink: 0防止小屏下被压缩变形；文字用flex-grow: 1自动占满剩余宽度 - 示例：
<div style="display: flex; align-items: center; gap: 8px;"><img src="a.jpg" style="width: 24px; flex-shrink: 0;"><span>操作成功</span></div>
为什么别碰 float 做图文并排
float 的唯一合理用途是长文章里的插图环绕——其他所有场景都该规避。它会主动破坏文档流，带来一堆隐性成本。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素脱离流，父容器高度塌陷，必须手动清浮动（
overflow: hidden或伪元素），否则后续内容会上移 - 和
flex/grid混用时，行为不可预测；现代框架（如 Tailwind、Bootstrap 5+）已完全弃用float布局类 - 响应式切换方向（比如从左图右文变上图下文）极难控制，
flex-direction: column一行就搞定的事，float得写两套样式 - 如果你看到老项目还在用
float做卡片布局，那基本等于在技术债里埋雷
真正容易被忽略的是 HTML 源码里的空白：换行、缩进、空格都会被解析成一个空格字符，造成不可见但可测量的间隙。删掉 img 和文字之间的换行，或给父容器设 font-size: 0 再单独恢复文字字号，比调十次 margin 更治本。
