图片默认按 baseline 对齐文字底部，导致视觉错位；应使用 vertical-align: middle 实现中线对齐，或 flex 布局配合 align-items: center 垂直居中，避免误用 line-height 调整对齐。
图片和文字 baseline 对不齐怎么办
默认情况下，<img> 是行内元素，会按 baseline 对齐文字底部，导致看起来“悬浮”或“下沉”。这不是 bug，是 CSS 默认行为——图片被当作字母 g、y 那样的下伸字符处理。
实操建议：
- 最直接：给
<img>加vertical-align: middle（对齐行框中线），适合大多数图文混排场景 - 如果想让图片底边贴住文字底边：用
vertical-align: bottom，但注意这会让图片完全脱离 baseline，可能影响邻近行高 - 避免用
vertical-align: top或text-top，除非你明确要顶对齐——它们容易引发父容器高度异常 - 别依赖
line-height调整对齐！它只控制行高，不改变 baseline 位置；强行调大反而会让空隙更明显
line-height 真的能“撑开”图片对齐吗
不能。很多人误以为调大 line-height 就能让图片“居中”，其实只是把行框拉高了，图片依然卡在 baseline 上，视觉上像“浮起来”了而已——本质是留白变多，不是对齐变了。
典型错误现象：line-height: 2 后图片看似居中，但换一行文字或改字体就错位，因为 baseline 没动，只是上下空间变大了。
立即学习“前端免费学习笔记（深入）”；
正确思路：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
line-height只该用于控制文字行间距，和图片对齐无直接关系 - 若需整体垂直居中（比如按钮里图标+文字），优先用
display: flex+align-items: center - 老项目兼容 IE8？只能靠
vertical-align配合微调margin-bottom补偿，但数值得实测，没有通用值
inline-block 图片加了 vertical-align 还不对齐？
常见于把 <img> 和 <span> 都设成 display: inline-block 后，发现还是错位。根本原因是：inline-block 元素也遵循 baseline 对齐规则，且默认 vertical-align: baseline。
排查要点：
- 检查父容器是否设置了
font-size: 0（常用来消灭 inline-block 间隙），但会导致文字消失——此时需单独给子元素设字号 - 确认所有参与对齐的元素都显式声明了
vertical-align，比如<span>也要加vertical-align: middle，否则它按 baseline 对齐，图片按 middle，自然错开 - 避免混用
vertical-align: middle和vertical-align: text-bottom在同一行，浏览器计算方式不同，结果不可控
Flex 布局下还要管 vertical-align 吗
不用。一旦父容器设了 display: flex，子元素（包括 <img>）自动脱离 inline 流，vertical-align 完全失效。
这时候对齐靠的是 flex 属性：
- 单行图文：用
align-items: center（交叉轴居中），最稳 - 需要文字在图片右侧且顶部对齐？用
align-items: flex-start - 注意
flex-direction: column时，align-items控制的是水平对齐，别搞反轴向 - 旧版 Safari 对
align-items支持弱，如果必须兼容，回退到vertical-align方案更可靠
真正容易被忽略的是：哪怕用了 flex，如果图片外层还包着 <a> 或 <span> 且没清除默认样式（比如 <a> 的 text-decoration 下划线会干扰视觉基准线），也会造成“好像没对齐”的错觉。
