图片与文字错位因默认baseline对齐，修复用vertical-align:middle或text-bottom；flex布局需设height和align-items:center；inline-block间隙可font-size:0解决；图片须设宽高防加载跳动。
文字和图片 baseline 对齐导致错位
默认情况下，<img> 是行内元素，浏览器会按 baseline 对齐——也就是图片底部和文字基线（字母 x 的下沿）对齐，不是和文字底部或中线对齐。这就造成视觉上“图片浮高、文字下沉”的错位感。
- 最直接的修复是设置
vertical-align: middle或vertical-align: bottom -
vertical-align: middle实际对齐的是元素的中点与父容器基线 + 0.5ex 的位置，多数场景比baseline更自然 - 若图片外层有行高（
line-height）或字体大小差异，middle仍可能微偏，此时改用vertical-align: text-bottom（对齐到文字底部）更稳
flex 布局中图片和文字无法垂直居中
用 display: flex 是更现代、可控的解法，但容易忽略容器高度和对齐属性的配合。
- 确保父容器设了
display: flex，且明确设置了高度（如height: 40px）或内容撑开高度 - 必须加
align-items: center才能垂直居中；仅靠justify-content: center只影响水平方向 - 如果文字换行或图片尺寸超限，加
flex-shrink: 0防止图片被压缩变形
inline-block 元素间有看不见的空白间隙
当用 display: inline-block 并排放文字和图片时，HTML 中的换行/空格会被渲染成约 4px 的空白，导致对不齐、间距异常。
-
解决方法之一：给父容器设
font-size: 0，再给子元素单独设font-size（文字需重置） - 更稳妥的做法是改用
flex或grid，避开 inline 模式固有缺陷 - 临时调试可用
letter-spacing: -4px消除间隙，但不推荐上线使用
图片加载失败时文字位置突然跳动
未设置图片宽高的情况下，加载失败后 <img> 退化为 0×0 行内框，文字会瞬间上移，破坏对齐稳定性。
立即学习“前端免费学习笔记（深入）”；
- 始终为
<img>显式声明width和height（哪怕只是占位尺寸） - 配合
vertical-align使用，例如：img { width: 24px; height: 24px; vertical-align: middle; } - 现代方案可结合
aspect-ratio+object-fit，但需注意 Safari 旧版本兼容性
vertical-align 和 align-items 的作用域完全不同，混用容易互相覆盖。 
