.navbar-brand看起来偏上是因为img默认vertical-align: baseline导致基线错位，文字下沉、图片浮高；应设height并用vertical-align: -.125em或改display: flex+align-items: center统一控制对齐。
.navbar-brand 里放 <img> 或文字时看起来偏上，不是 Bug，是浏览器默认对齐行为在起作用——别急着加 margin-top，先确认是不是基线（baseline）错位或 flex 容器没兜住。
为什么 .navbar-brand 看起来“偏上”？
根本原因是：<img> 默认 vertical-align: baseline，而文字的基线在字母底部，图片底边却对齐到那条线，导致图片“浮高”，文字反而显得下沉；如果 .navbar-brand 没被包裹在 d-flex align-items-center 的父容器里，align-items 根本不生效。
-
<img>必须显式设height（比如height: 32px），否则尺寸不可控，flex 对齐失去参考 - 避免把
<img>和<span></span>平级塞进.navbar-brand却不加布局类——这是最常见失效源头 - 检查 DevTools 中
.navbar-brand的 computeddisplay：如果是inline（默认值），align-items-center不会作用于它自身
用 vertical-align 快速修正图片对齐
如果 .navbar-brand 是 inline 元素（没改过 display），直接给图片加 vertical-align 最轻量、最兼容：
.navbar-brand img {
height: 32px;
vertical-align: -.125em; /* Bootstrap Icons 默认值，PNG/SVG 也适用 */
}
- 不用改 HTML 结构，也不依赖父容器是否 flex
- 比
margin-top: 4px更稳定——后者在缩放或字体变化时容易偏移 - 若用了自定义图标字体（如
<i class="bi bi-logo"></i>），确认没被其他 CSS 覆盖掉vertical-align
用 d-flex + align-items-center 彻底统一对齐逻辑
当 .navbar-brand 内混排文字和图片，或你希望行为完全可控，就让它变成 flex 容器本身：
.navbar-brand {
display: flex;
align-items: center;
height: 56px; /* 必须有明确高度，否则 align-items 没基准 */
line-height: 1;
}
-
height是关键：Bootstrap 的.navbar默认min-height: 56px，但.navbar-brand若没设高，会塌陷，align-items: center就无效 - 内部
<img>可删vertical-align，它现在是 flex item，对齐由align-items控制 - 如果
.navbar-brand原本是inline，加display: flex后会变块级，注意是否影响响应式折叠逻辑（比如.navbar-collapse下的宽度）
滚动收缩后 Logo 突然上浮，怎么修？
这不是 CSS 写错了，而是 JS 动态加了 .fixed-header-on 类，触发了另一套 navbar 高度和 padding 规则，但 Logo 没同步适配。修复必须状态级补偿：
- 先在 DevTools 查看
<nav></nav>是否真加了.fixed-header-on - 在相同断点下重置 Logo 间距，例如：
@media (min-width: 768px) { .fixed-header-on .navbar-brand img { margin-top: 8px; } } - 千万别在折叠态（
.navbar-collapse）里还硬塞d-flex align-items-center——垂直流布局下它没意义，反而增加渲染负担
复杂点在于：同一套 HTML 结构要同时应对常规态、收缩态、折叠态三种上下文，每种状态的父容器 display、height、padding 都不同。最容易被忽略的是——你调好了桌面态，却忘了检查移动端展开菜单（offcanvas）里 .navbar-brand 是否还居中，而那里往往需要单独加 justify-content-center 到 .offcanvas-body。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
