vertical-align 默认 baseline 导致 img 与文字不对齐，因 baseline 是字母 x 底边而非文字底边；推荐用 flex 布局或 vertical-align: text-bottom/bottom 替代 middle 实现稳定对齐。
vertical-align 对 img 和文字不对齐？先看默认行为
vertical-align 默认值是 baseline，但这个“基线”不是文字底部，而是字母 x 的下边缘（即 text-bottom 附近），而 <img> 作为行内替换元素，它的底边会和这根基线对齐——结果就是图片看起来“悬在文字下方”，中间留白。
常见错误现象：
- 文字右侧紧挨着
<img src="icon.png">文字，但图片明显比文字低 - 设置了
line-height后，错位更明显 - 用
margin-top硬调，换字体或字号就崩
关键原因：文字有升部（如 b、d）、降部（如 g、y），而 baseline 只锚定 x 高度，不是视觉中心。
让图片和文字真正居中对齐的三种可靠写法
最稳的方式不是死磕 vertical-align，而是组合使用：
- 给
<img>加vertical-align: middle—— 它会让图片中点对齐父元素的“基线 + 半个 x-height”位置，多数场景够用 - 更精确：用
vertical-align: text-bottom或vertical-align: bottom拉齐到底边，再配合line-height控制文字高度 - 现代推荐：把图片和文字包进
<span></span>或<div>，设为 <code>display: flex; align-items: center，彻底绕过行内对齐陷阱注意：
vertical-align只对display: inline或inline-block元素生效，对block或flex子项无效。为什么 vertical-align: middle 看起来还是偏高？
这不是 bug，是计算逻辑导致的：
-
vertical-align: middle对齐的是“父元素 font-size 的 0.5ex + baseline”，而 ex 是当前字体中 x 字母的高度，不同字体差异大 - 中文字体通常没有明显 x-height 概念，浏览器会估算，结果常偏高
- 如果父容器
line-height远大于font-size，middle 会参考整个行高的中点，图片就被顶得更高
实操建议：
- 查看 computed styles，确认实际生效的
line-height和font-size - 临时加
background: yellow到文字容器，看清行框范围 - 不要依赖
vertical-align: middle做像素级对齐，它本就不承诺绝对居中
inline-block + vertical-align 的兼容性坑
IE8+ 支持
vertical-align，但 IE8 对inline-block有特殊要求：必须给元素设置zoom: 1和*display: inline才生效。更隐蔽的问题：
- 空格和换行符会被渲染为一个空格，导致
<img>和文字间出现不可控间隙 - 解决方法：删 HTML 中的换行，或设父容器
font-size: 0，再给子元素单独设字体大小 - 若图片带
width/height且小于行高，vertical-align仍按整行计算，容易误判
真正需要稳定图文对齐时，优先用
display: flex；只有必须保持行内流（比如段落内嵌图标）才用vertical-align，并始终用text-bottom或bottom替代middle。对齐这件事，表面是调一个属性，实际是在和浏览器的行盒模型、字体度量、渲染顺序打交道。稍不注意，换个字体、改个 line-height，就全乱了。
-
