align-items: baseline 对 “看起来没对齐”是因为 作为替换元素，其基线位于底边上方约25%高度处，而文字基线由字体族和字号决定，二者物理位置天然不重合；浏览器仅将两者各自基线强制拉至同一水平线，并不调整图片尺寸或位置，导致视觉错位。
align-items: baseline 对 <img> 为什么“看起来没对齐”
因为 <img> 是替换元素（replaced element），它的基线默认位于**底边上方约 25% 高度处**，而非文字的字体基线位置；而文字的基线由 font-family 和 font-size 共同决定——两者物理位置天然不重合。浏览器不会拉伸或偏移图片来“匹配”文字基线，只是把两个不同定义的基线硬拉到同一水平线，结果就是视觉错位。
哪些情况会让 <img> 的基线失效或被覆盖
常见干扰项直接切断基线计算路径：
-
<img>被包在div或p里，且该容器是 flex item → 容器无文本基线，fallback 到 margin box 底边 -
<img>设置了display: block→ 失去内联上下文，基线逻辑中断 - 父 flex 容器子项中混有
vertical-align: middle→ 该声明虽对 flex item 无效，但会误导调试方向，掩盖真正问题 -
<img>没设vertical-align，但父级用了align-items: baseline→ 浏览器仍按默认vertical-align: baseline解析，但这个 baseline 和文字的 baseline 不是一回事
让 <img> 和文字真正基线对齐的实操做法
核心不是“调样式”，而是统一基线来源或显式控制偏移：
- 给
<img>显式加vertical-align: baseline（仅在 inline/inline-block 场景下生效） - 把
<img>和旁边文字都包裹进同一个display: inline-flex容器，再设align-items: baseline—— 基线计算局限在可控范围内 - 放弃基线依赖，改用
align-items: center+ 统一line-height: 1.4+ 微调margin-top或transform: translateY()，例如：transform: translateY(calc(0.25em - 2px)) - 响应式场景下，优先固定图片尺寸（如用
aspect-ratio或明确height），避免因缩放导致基线参考高度漂移
为什么 align-items: last baseline 也救不了 <img>
align-items: last baseline 只对含多行文本的元素有意义（比如换行的 <p></p> 或 <span></span>），而 <img> 永远只有一行内容、没有“最后一行文本”，所以它依然 fallback 到自身默认基线位置——和 baseline 行为一致，不会改善对齐效果。
真正难的不是写对 align-items: baseline，而是意识到：当目标元素是 <img>、<svg></svg> 或空容器时，“基线对齐”本身就是一个伪命题；此时用盒模型控制比猜字体度量更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
