align-items-center 必须加在图标和文字的直接父容器上且该容器为 flex 容器，否则无效；svg 图标需重置 vertical-align 才能与文字精准垂直居中。
align-items-center 加在哪才真正起效
它只对 Flex 容器的**直接子元素**生效，不是加在任意父级上都能“传染”到图标和文字。常见错误是把 d-flex align-items-center 加在 .navbar 或 .container 这类大容器上，结果图标还在原地不动。
必须确保：图标（<i class="bi bi-star"></i>）和文字（比如 <span>收藏</span>）是同一级子元素，且它们的**直接父容器**同时具备两个条件：
-
display: flex（用d-flex类或自定义 CSS） -
align-items: center（即align-items-center） - 该父容器不能是
inline或inline-block—— 否则 Flex 行为不触发
例如正确结构：
<div class="d-flex align-items-center"> <i class="bi bi-heart"></i> <span>喜欢</span> </div>而不是嵌套一层
<p></p> 或 <strong></strong> 再丢进去。
为什么按钮里加了 align-items-center 还是偏移 1–2px
因为 align-items: center 对齐的是子元素的 margin box 几何中心，而 SVG 图标（包括 Bootstrap Icons 的 <i></i> 内部 <svg></svg>）默认按 baseline 渲染，其视觉基线和文字不重合。尤其在小字号（如 font-size: 0.875rem）下，这种像素级错位非常明显。
解决办法不是调 align-items，而是归一化子元素的渲染行为：
- 给图标加
display: inline-block（<i></i>默认就是，但某些图标库会覆盖） - 显式设图标尺寸：
width: 1em; height: 1em;，避免依赖字体度量 - 若仍偏高，单独给图标加
align-self: center或临时margin-top: -1px（仅限调试，别进生产） - 避开
line-height: 2这类无单位值，改用line-height: 1.5或固定像素值
SVG 自带 vertical-align 干扰 align-items-center
Bootstrap Icons v1.10+ 的 SVG 源码里内置了 vertical-align: -0.125em，它会覆盖你写的 Flex 对齐逻辑，导致 align-items-center 看似没反应。
必须先“清空”这层干扰：
- 重置 SVG 自身对齐：
i.bi svg { vertical-align: inherit; } - 再统一控制外层
<i></i>：i.bi { vertical-align: text-bottom; }或留空让 Flex 主导 - 别用
!important强盖，容易在响应式换字号时崩——-0.125em 在1.25rem下可能变成 -0.15625em，失准
实测发现，只要 SVG 的 vertical-align 被设为 inherit 或 unset，align-items-center 就能稳定接管对齐。
折叠态（小屏幕）下 align-items-center 失效怎么办
在 .navbar-collapse 展开后，导航项变成垂直堆叠，Flex 的交叉轴（Y 轴）方向失效，align-items-center 不再有作用空间。此时强行加 d-flex 反而破坏语义，还可能让点击热区收缩。
真实有效的做法是媒体查询兜底：
- 针对折叠态单独微调：
@media (max-width: 767.98px) { .navbar-collapse .nav-link { padding-top: 0.5rem; padding-bottom: 0.5rem; } } - 如果是 Logo 图片下沉，直接调
margin-top更精准：.navbar-collapse .navbar-brand img { margin-top: 2px; } - 不要指望一套 CSS 通吃所有断点——字号、行高、图标尺寸在 sm/md/lg 下都不同，对齐偏移量也得跟着变
最麻烦的从来不是写对齐代码，而是同一段 HTML 在 font-size: 0.875rem 和 1.25rem 下，需要两套完全不同的 vertical-align 值或 margin 补偿。建议把图标+文字组合抽成独立组件，封装对齐逻辑，别散落在各处硬写 style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
