Logo文字混排垂直居中失效的根本原因是父容器的行高、基线对齐与flex交叉轴行为未对齐；尤其当和并排时，vertical-align与align-items冲突导致错位。
Logo 文字混排无法垂直居中，根本不是文字本身的问题，而是父容器的行高、基线对齐和 flex 交叉轴行为没对齐——尤其当 <span></span> 或 <strong></strong> 和 <img> 并排时，vertical-align 和 align-items 会打架。
为什么 align-items-center 对 Logo + 文字组合无效
Bootstrap 的 .navbar-brand 默认是 inline 元素（或 display: inline-flex），内部若混用 <img> 和 <span></span>，浏览器会按 baseline 对齐：图片底边对齐文字 x 字高底部，导致视觉上“文字浮高、Logo 下沉”。此时加 d-flex align-items-center 到外层，只对 flex 子项生效；但若子项本身是 inline，它不会自动变成 flex item，align-items 就不触发。
- 确认
.navbar-brand是否被包裹在d-flex容器里（比如自定义的<div class="d-flex align-items-center">） <li>检查内部元素是否都显式设为 <code>display: flex或display: inline-flex—— 单靠align-items-center不会改变子元素的 display 类型 - 避免把
<img>和<span></span>直接平级放在.navbar-brand内却不加任何布局类，这是最常见失效源头 - 给
<img>加style="max-width:90%"（Bootstrap Icons 已内置该值，PNG/SVG 图片需手动补） - 若用
<i class="bi bi-logo"></i>，确保没被其他 CSS 覆盖vertical-align - 不要依赖
text-center或mx-auto解决垂直对齐——它们只管水平 - 调试时，在 DevTools 中临时删掉
vertical-align看是否立刻错位，能快速验证是不是基线问题 - 加专属选择器：
@media (max-width: 767.98px) { .navbar-collapse .navbar-brand { padding-top: 12px; padding-bottom: 12px; } } - 若 Logo 是图片，直接调
margin-top更精准：.navbar-collapse .navbar-brand img { margin-top: 4px; } - 别在折叠态还硬塞
d-flex—— 垂直流布局下它没意义，反而增加渲染开销 - 注意：折叠态的
.navbar-brand默认是块级，text-center此时才真正起作用（水平居中），但垂直仍要靠 padding/margin 补偿 - 用
.fixed-header-on #logo（ID 优先级高）或.fixed-header-on .navbar-brand img做媒体查询覆盖 - 典型修复：
@media (min-width: 768px) { .fixed-header-on .navbar-brand img { margin-top: 8px; } }（值根据实际收缩后高度差定） - 比
margin更稳的是transform: translateY()：transform: translateY(-2px);，无文档流影响，不触发重排 - 务必在 DevTools 中手动 toggle
.fixed-header-on类，实时观察效果——很多“修好了”其实是没真触发收缩态
<img> 和 <span></span> 混排时必须统一 vertical-align
即使你用了 d-flex，如果 <img> 保留默认 vertical-align: baseline，而 <span></span> 是内联文本，它们在 flex 容器里的基线仍可能错位。稳妥做法是显式归一化：
折叠态（.navbar-collapse）下 Logo 垂直偏移怎么修
小屏幕展开后，.navbar-collapse 把所有内容转为垂直堆叠，align-items-center 失效，且行高、padding 变化会让 Logo 看起来“上移”。这时不能靠 flex，得用媒体查询微调：
滚动收缩（.fixed-header-on）时 Logo 上浮的修复逻辑
滚动后 navbar 高度压缩，但 Logo 容器的 padding 或 margin 没同步缩放，就会视觉上“上浮”。关键不是重写整个布局，而是针对性补偿：
真正卡住人的从来不是 class 名记不住，而是没意识到：同一段 HTML 在不同断点下，起作用的对齐机制完全不同——flex、baseline、padding、transform 各司其职，混用就失效。盯住当前断点的实际渲染结构，比背口诀管用得多。
