vertical-align仅对行内级元素生效，align-items:center必须作用于直接父容器；图标下沉是因行内元素默认基线对齐，SVG图标需统一vertical-align或改用inline-flex兜底。
只对行内级元素生效，
必须作用于直接父容器 —— 这两个规则没对齐，图标就永远比文字低半截。
为什么
总是下沉半截
这不是 bug，是 HTML 行内元素默认按基线（baseline）对齐的自然行为。
和文字的基线位置不同，尤其当字体尺寸、行高不一致时，错位更明显。Bootstrap Icons v1.10+ 内置了
，但这个值只在图标保持
且父容器没加
类时才起效。
别给图标加
或
，会直接让
失效
SVG 图标源码里常带
，需在外层
上统一重写
用
或
替代
时，建议同步固定
（如
），否则换字号就偏移
在导航项里失效的三个原因
Flex 布局看似万能，但在
这类嵌套结构中容易失灵，关键看三层关系：
必须是直接包裹图标的那个容器设
，隔一层（比如
）就无效
图标和文字得同级，不能一个包在
里、一个裸写，层级越深越容易被继承样式干扰
检查是否有隐式
或
：比如
默认有上下间距，或
有
拉高了容器高度
纵向导航菜单中图标+文字的可靠对齐方案
语义化结构 + inline SVG + flex 组合最可控，比纯行内混合更稳定：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
，别用
vertical-alignalign-items: centervertical-align: -.125emdisplay: inlinealign-items-startdisplay: blockfloatvertical-alignvertical-align: inherittext-bottommiddle-.125emfont-sizefont-size: 1remalign-items: center 文字 d-flex align-items-center... marginpaddingline-height
堆砌
fill="currentColor"
或
stroke="currentColor"
，hover 时改
color
就自动同步图标色
display: flex; align-items: center; gap: 12px; min-height: 48px;
，不用
height
防止文字换行撑开
清掉
padding-left
和
list-style
，否则左侧留白难控制
兜底方案：什么时候该用
inline-flex
当
vertical-align
被父级 flex 干扰、又不想重构 DOM 层级时，把图标和文字一起包进一个
span
并设
display: inline-flex; align-items: center;
最省事：
这个方案绕开了基线对齐逻辑，也不依赖外层 flex 容器的对齐设置，但要注意：它会让整个组合变成一个不可拆分的行内单元，如果后续要单独动画图标或文字，就得再加一层包装。