图片行内垂直居中困难源于vertical-align:baseline，默认使图片底部对齐文字基线；推荐用display:inline-block+vertical-align:middle，并配合显式设置父元素line-height以确保效果稳定。
图片在行内元素中垂直居中困难，本质是默认 vertical-align: baseline 导致的——图片底部会和文字基线对齐，留下难看的空白缝隙。解决核心不是“浮动”，而是控制行内对齐行为。
把图片设为 inline-block + vertical-align
这是最直接、兼容性好、无需父容器额外设置的方法：
- display: inline-block 让图片脱离纯替换元素限制，获得对齐控制权
- vertical-align: middle / top / bottom / text-bottom 可精准调整相对位置
- 常用推荐：
vertical-align: middle—— 图片中点对齐行框中线，视觉上最接近“垂直居中”
注意行高（line-height）的影响
行内元素的垂直居中效果高度依赖父容器的 line-height：
- 若父元素（如
<span>或段落）未设line-height，浏览器用默认值（通常约 1.2），中线位置不易预测 - 建议显式设置父容器
line-height: 1.5em或具体像素值（如line-height: 24px），再配合vertical-align: middle效果更稳定
替代方案：flex 布局（现代简洁）
如果父容器可以改为 flex 容器，一行代码就能彻底解决：
立即学习“前端免费学习笔记（深入）”；
- 给包裹图片的父元素加
display: flex; align-items: center; - 图片保持
display: inline或block都可，无需额外对齐设置 - 注意：此法要求父元素是块级或独立容器，不适用于纯文本流中的混排场景（比如图文夹杂的段落）
基本上就这些。inline-block + vertical-align 是行内上下文里的黄金组合，不复杂但容易忽略细节。
