图片在行内混排时下沉是因vertical-align默认baseline导致，解决方法包括设vertical-align:middle/top、用flex布局align-items:center或transform微调，需注意font-size和line-height影响。
图片和文字在行内混排时总往下掉一截
这是 vertical-align 默认值惹的祸。图片是 inline 元素，默认按基线（baseline）对齐，而文字的基线以下还留有 descender 空间（比如字母 g、y 的下延部分），导致图片看起来“悬空”或“下沉”。
- 最直接的解法是给图片加
vertical-align: middle或vertical-align: top - 避免用
vertical-align: baseline（它是默认值，往往就是问题本身） - 如果同时设置了
line-height，要留意它会影响行框高度，进而影响middle的参照位置
用了 display: inline-block 还是对不齐
inline-block 元素仍受 vertical-align 控制，且默认对齐方式还是 baseline。光改显示类型不够，必须显式设置对齐基准。
- 给图片和相邻文字容器（比如
）都加上vertical-align: middle - 注意父容器的
font-size和line-height会影响middle的计算结果 - 若文字用了不同字号，建议统一用
em或rem配合vertical-align: middle微调
想让图片和文字真正“视觉居中”，但 vertical-align: middle 看起来偏高
vertical-align: middle 是让元素中线与父元素基线 + 0.5×x-height 对齐，并非像素级居中。实际视觉上常略偏上，尤其当文字较小时更明显。
- 可尝试
vertical-align: -2px或vertical-align: 1px手动微调（数值需根据字体大小实测） - 更稳妥的方式：把图片和文字都包进一个
display: flex容器，用align-items: center - 若必须保持行内流布局，可用
transform: translateY(-50%)配合position: relative做像素级修正
.icon-text {
display: inline-flex;
align-items: center;
gap: 4px;
}
.icon-text img {
height: 16px;
width: 16px;
vertical-align: middle; /* 保留以防 flex 失效回退 */
}行内对齐看着简单，实际依赖多个属性协同；vertical-align 的行为和字体度量强相关，不同系统渲染可能略有差异——实测比理论推导更可靠。
立即学习“前端免费学习笔记（深入）”；
