图像在列表项中默认与文本基线对齐，导致下方出现空白缝隙；解决需用vertical-align作用于img自身，或改display为flex/block配合居中。
图像在列表项中默认对齐方式是什么
HTML5 中，<img> 是行内元素，默认与文本基线（baseline）对齐，不是底部也不是中间。放在 <li> 里时，若列表项含文字，图像下方常出现“空白缝隙”——那其实是基线对齐留下的行内间隙，不是 margin 或 padding。
用 vertical-align 消除常见对齐错位
这个属性是解决列表内图像对齐的核心，但必须作用于 <img> 自身，且只对行内或表格单元格生效：
-
vertical-align: top：图像顶端与行框顶部对齐（适合多图并排） -
vertical-align: middle：图像中点与父行框基线 + 0.5×x-height 对齐（视觉上更居中） -
vertical-align: bottom：图像底边与行框底边对齐（最常用，彻底消除缝隙） -
vertical-align: text-bottom：图像底边与父元素字体的底部对齐（比bottom更贴合文字）
⚠️ 注意：vertical-align 不影响块级容器的布局流，也不会让图像“垂直居中于整个 <li>”，只是调整它在当前行内的垂直位置。
列表项内图像真正垂直居中需配合 display 调整
如果目标是让图像在 <li> 高度内上下居中（比如图标+文字等高排列），仅靠 vertical-align 不够，得改变图像的显示行为：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加display: block，再用margin: auto居中（需父<li>设定高度和text-align: center） - 更通用做法：将
<li>设为display: flex，然后用align-items: center—— 这时vertical-align就失效了，但图像会真正在容器中垂直居中 - 若兼容 IE10+，推荐 flex；若需支持老浏览器，用
display: table-cell+vertical-align: middle组合
示例（flex 方案）：
<li style="display: flex; align-items: center;"> <img src="icon.png" alt="icon" style="width: 16px; height: 16px;"> <span>菜单项</span> </li>
列表符号（marker）与图像共存时的对齐干扰
当 <li> 启用了自定义 marker（如 list-style-image）或使用伪元素生成符号，<img> 的 vertical-align 仍只影响自身所在行，不控制 marker 位置。此时容易出现图标、marker、文字三者错层。
- 避免混用
list-style-image和行内<img>，优先用背景图或伪元素统一管理图标 - 若必须共存，把
<img>包进<span>并设display: inline-block，再单独调vertical-align - 注意
line-height值会影响整体行高，进而改变对齐视觉效果，建议显式设置
图像在列表里的对齐，本质是行内格式化上下文（IFC）的行为控制，不是“图像自己想在哪就在哪”。多数人卡住的地方，是没意识到 vertical-align 的作用域仅限于当前行盒，而非整个列表项容器。
