navbar-brand与nav-link不对齐本质是flex布局下baseline和line-height不一致所致：前者为inline-flex，后者为inline-block，且二者不在同一flex上下文中；需通过vertical-align:middle、统一line-height及offcanvas下激活d-flex等方案系统解决。
Bootstrap 导航栏里 navbar-brand 和文字（比如 nav-link）不对齐，本质是 flex 布局下基线（baseline）和行高（line-height）不一致导致的视觉偏移，不是“没居中”，而是“看起来没对齐”。直接加 vertical-align: middle 或 align-items: center 往往无效，因为作用对象错了。
为什么 navbar-brand 和 nav-link 总是高低不一
默认情况下：navbar-brand 是 display: inline-flex（含 logo 图片 + 文字），而 nav-link 是 display: inline-block；两者父容器（.navbar）用的是 align-items: center，但该属性只对 flex 子项生效——而 .navbar-nav 是独立 flex 容器，navbar-brand 和 .navbar-nav 是同级兄弟元素，不在同一个 flex 上下文里对齐。
-
navbar-brand内部若含<img>，图片默认vertical-align: initial（即 baseline），会把底部对齐文字基线，造成上浮感 -
nav-link的line-height若未显式设为与navbar高度匹配（如line-height: 56px），文字就会在行内“沉底”或“漂浮” - 响应式折叠后（offcanvas），
navbar-brand被包裹进.offcanvas-header，该区域默认无display: flex，align-items: center失效
让 navbar-brand 和 nav-link 视觉对齐的实操方案
不改 HTML 结构、不加额外 wrapper，只靠 CSS 微调：
- 给
navbar-brand img加vertical-align: middle（不是text-bottom，也不是top） - 统一所有导航项的行高：在
.navbar上设height: 56px（或你实际高度），再给.navbar-brand, .nav-link设line-height: 56px - 若
navbar-brand是纯文字，确保其font-size和font-weight不导致盒模型撑高；可用transform: translateY(-1px)做像素级微调（仅当其他方式失效时） - 避免对
.navbar直接加align-items: center—— 它对navbar-brand有效，但对.navbar-nav里的nav-link无效，因为后者在子 flex 容器里
折叠态（offcanvas）下 Logo 垂直居中失效怎么办
offcanvas 模式下，navbar-brand 被移到 .offcanvas-header，而该容器默认是 block 流，align-items 不起作用。此时必须显式激活 flex 行为：
- 给
.offcanvas-header加class="d-flex align-items-center" - 确保
.offcanvas-header有明确高度（如min-height: 56px），否则align-items: center无空间可居中 - 若用了自定义 toggle 按钮（非
navbar-toggler），检查它是否被ms-auto推到右侧，导致navbar-brand实际位置偏左，产生“不对齐”错觉 - 不要用
margin-top: auto或position: absolute强拉——offcanvas 高度动态变化，会出界或遮挡关闭按钮
别踩这些兼容性坑
某些老项目还在用 Bootstrap 4，它的 navbar-brand 默认是 display: inline-block，而 Bootstrap 5 改为 inline-flex。混用版本时，vertical-align 行为会突变。
- 在 Bootstrap 4 中，对
navbar-brand img加vertical-align: middle就够了；Bootstrap 5 还需同步处理文字部分的line-height - iOS Safari 15.4 之前，
align-items: center在min-height容器里偶尔失效，建议 fallback 用padding-top: calc((56px - 1.2em) / 2)（假设字体大小 1.2em） - 深色模式下，如果用
filter: brightness()或color-mix()动态调色，可能影响文字渲染高度，需重新校验对齐
真正难的不是让它们“看起来对齐”，而是让对齐在所有断点、所有设备、所有主题切换后依然稳定——这意味着不能依赖 magic number（比如硬写 margin-top: -2px），而要从布局机制（flex / line-height / vertical-align）本身找一致性锚点。
