Bootstrap导航栏文字默认不垂直居中，是因为父容器未启用Flex布局或子元素未脱离baseline对齐上下文；align-items-center必须加在父容器且其display为flex才生效，text-center和align-middle对此无效。
Bootstrap 导航栏里的文字默认不垂直居中，是因为父容器没启用 Flex 布局，或者子元素未脱离 baseline 对齐上下文——光靠 text-center 或 align-middle 没用。
为什么 align-items-center 加了也不生效
常见错误是把 align-items-center 加在文字本身（比如 <p> 或 <a>）上。这个类只对**父容器**起作用，且前提是该父容器已设为 display: flex 或 display: inline-flex。
-
.navbar默认是display: flex，但它的子项（如.navbar-brand、.navbar-nav）若内部结构混乱（比如混排<img>和文字又没统一 display），align-items-center就无法穿透生效 - 如果
.navbar-brand里直接放<img>和<span>，浏览器会按 baseline 对齐，导致视觉偏移；此时加d-flex align-items-center到.navbar-brand外层才有效 - 折叠态（
.navbar-collapse）下，Flex 布局被转为垂直堆叠，align-items-center自动失效，得靠媒体查询单独调padding-top或margin-top
.navbar-brand 里图片和文字混排怎么对齐
根本问题是 <img> 默认 vertical-align: baseline，而文字基线位置随字体变化，导致错位。不能只靠微调 line-height 或 padding。
- 给
.navbar-brand加d-flex align-items-center，并确保其子元素显式设为display: inline-flex或display: flex -
<img>必须设height（比如height: 1.5rem），否则高度不可控；再加align-self: center或vertical-align: -0.125em（Bootstrap Icons 的标准偏移值） - 避免把
<img>和文字平级放在.navbar-brand内却不加任何布局控制——这是最常被忽略的结构漏洞
导航栏菜单项（.nav-link）里的图标+文字怎么垂直居中
菜单项内嵌 SVG 或字体图标时，vertical-align 极易受兄弟元素影响，尤其当不同图标来自不同库（Bootstrap Icons vs Font Awesome）时。
- 不要依赖
vertical-align: middle：它对齐的是“x-height 中线”，不是容器中心，且受行高、字体缩放干扰极大 - 给每个
.nav-link设display: inline-flex+align-items: center+gap: 0.5rem，让图标和文字成为弹性子项 - SVG 图标需显式设
width和height（如width="1.2rem" height="1.2rem"），否则 viewBox 原点位置不一致会导致视觉浮动 - 若用
<i class="bi-cart">，检查是否被其他 CSS 覆盖了内置的vertical-align: -0.125em
响应式断点下怎么控制居中行为
Bootstrap 5 不提供类似 align-items-md-center 的断点类，必须手动组合。
- 想在 ≥768px（md）时居中，小屏保持默认左对齐：用
justify-content-md-center align-items-md-center，但必须加在有明确高度的容器上（比如min-height: 60px） - 别写
<div class="text-md-center d-flex align-items-center">——text-md-center只管水平，且align-items-center在无高度容器里无效 - 折叠态下
.navbar-collapse .navbar-brand推荐用媒体查询单独处理：@media (max-width: 767.98px) { .navbar-collapse .navbar-brand { padding-top: 12px; } }
真正容易被忽略的点是：所有对齐都依赖父容器的 display 类型和尺寸上下文。没有 d-flex 和明确高度（哪怕只是 h-100 或 min-height: 60px），align-items-center 就只是个摆设。
