navbar logo 默认偏高是因为 img 的 baseline 对齐导致视觉错位；解决方法是给 img 加 vertical-align: middle，svg 或文字 logo 则用 line-height 匹配 navbar 高度。
Navbar品牌Logo默认垂直对齐为什么看起来偏高？
Bootstrap 5 的 .navbar-brand 默认用 display: inline-flex + align-items: center，但实际效果常让人觉得 Logo 上浮、文字下沉——根本原因是 img 在行内上下留白（来自 baseline 对齐），而文字默认 baseline 对齐，导致视觉错位。
这不是 Bug，是 HTML 行内元素的固有行为；直接改 vertical-align 或 margin 往往治标不治本。
用 vertical-align: middle 修正图片对齐
最轻量、兼容性最好的方式：给 Logo img 加 vertical-align: middle。它让图片中线与父容器基线中线对齐，和文字自然居中。
- 必须作用在
<img>标签上，不是.navbar-brand容器 - 不要写成
vertical-align: center（无效值） - 如果用了 SVG 或背景图，此法不适用，需换方案
<div class="navbar-brand"> @@##@@ </div>
当 Logo 是 SVG 或文字时，改用 line-height + padding 控制
SVG 内联或纯文本 Logo 不受 vertical-align 影响，此时要靠容器高度与行高匹配：
- 确保
.navbar高度已固定（如 Bootstrap 默认height: 56px） - 设
.navbar-brand的line-height: 56px（与 navbar 高度一致） - 若仍有缝隙，微调
padding-top/padding-bottom，避免用margin（会破坏 flex 布局） - 注意响应式断点：
@media (max-width: 991.98px)下 navbar 折叠，line-height可能需重置
Flex 布局下强行居中反而容易出问题
有人试图给 .navbar-brand 加 display: flex + align-items: center，但 Bootstrap 5 的 navbar 本身已是 flex 容器，嵌套 flex 容易触发：
- 多余空白（flex item 默认
min-width: auto） - 在小屏折叠时，
.navbar-collapse内部 flex 轴向冲突 - 移动端点击区域变小（因
align-items: center压缩了行高）
真要用 flex，优先改 .navbar-nav 或 .navbar-collapse 的对齐，而不是动 .navbar-brand。
最稳妥的做法永远是：先看 Logo 类型（img/SVG/text），再选对应对齐策略；别统一套 class，更别全局覆盖 .navbar-brand 的 align-items。
