vertical-align仅对行内级元素生效，align-items:center必须作用于直接父容器；图标下沉是因行内元素默认基线对齐，SVG图标需统一vertical-align或改用inline-flex兜底。
vertical-align 只对行内级元素生效，align-items: center 必须作用于直接父容器 —— 这两个规则没对齐，图标就永远比文字低半截。
为什么 <i class="bi"></i> 总是下沉半截
这不是 bug，是 HTML 行内元素默认按基线（baseline）对齐的自然行为。<i></i> 和文字的基线位置不同，尤其当字体尺寸、行高不一致时，错位更明显。Bootstrap Icons v1.10+ 内置了 vertical-align: -.125em，但这个值只在图标保持 display: inline 且父容器没加 align-items-start 类时才起效。
- 别给图标加
display: block或float，会直接让vertical-align失效 - SVG 图标源码里常带
vertical-align: inherit，需在外层<i></i>上统一重写 - 用
text-bottom或middle替代-.125em时，建议同步固定font-size（如font-size: 1rem），否则换字号就偏移
align-items: center 在导航项里失效的三个原因
Flex 布局看似万能，但在 <li><a><i></i> 文字</a></li> 这类嵌套结构中容易失灵，关键看三层关系：
- 必须是直接包裹图标的那个容器设
d-flex align-items-center，隔一层（比如<li><div class="d-flex">...</div></li>）就无效 - 图标和文字得同级，不能一个包在
<strong></strong>里、一个裸写，层级越深越容易被继承样式干扰 - 检查是否有隐式
margin或padding：比如<li>默认有上下间距，或<a></a>有line-height拉高了容器高度
纵向导航菜单中图标+文字的可靠对齐方案
语义化结构 + inline SVG + flex 组合最可控，比纯行内混合更稳定：
立即学习“前端免费学习笔记（深入）”；
- 用
<nav><ul><li><a><svg></svg> 文字</a></li></ul></nav>，别用<div> 堆砌 <li> <code><svg></svg>内设fill="currentColor"或stroke="currentColor"，hover 时改color就自动同步图标色 -
<a></a>设display: flex; align-items: center; gap: 12px; min-height: 48px;，不用height防止文字换行撑开 - 清掉
<ul></ul>的padding-left和list-style，否则左侧留白难控制
兜底方案：什么时候该用 inline-flex
当 vertical-align 被父级 flex 干扰、又不想重构 DOM 层级时，把图标和文字一起包进一个 span 并设 display: inline-flex; align-items: center; 最省事：
<a href="#">
<span style="display: inline-flex; align-items: center;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">...</svg>
<span>仪表盘</span>
</span>
</a>
这个方案绕开了基线对齐逻辑，也不依赖外层 flex 容器的对齐设置，但要注意：它会让整个组合变成一个不可拆分的行内单元，如果后续要单独动画图标或文字，就得再加一层包装。
