根本原因是浏览器按基线（baseline）对齐：默认inline，底边对齐文字baseline，导致图片“浮高”、文字“下沉”；vertical-align: middle无效因它对齐行框中线而非容器中心，需配合明确height和line-height，且flex下须用align-items: center并确保内部为flex item。

为什么 .navbar-brand 里的图片和文字视觉上“不居中”

根本不是居中失效，而是浏览器按基线（baseline）对齐——<img> 默认是 inline 元素，它的底边会和文字的 baseline 对齐，而文字 baseline 在字体内部偏下位置，导致图片看起来“浮高”、文字“下沉”，整体错位。你看到的“偏移”，其实是 HTML 渲染规则的正常表现，不是 CSS 写错了。

vertical-align: middle 为什么加了也没用

因为 vertical-align: middle 不是对齐到容器中心，而是对齐到父元素行框（line box）的“中线”，而这个中线高度由 line-height 和兄弟元素共同决定。如果父容器没设 line-height，或图片高度远超行高，middle 就找不到参考基准。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 必须同时给 <img> 设明确高度，比如 height: 32px
• 父容器（如 .navbar-brand）要设稳定 line-height，例如 line-height: 60px
• 若父容器已是 display: flex，vertical-align 直接失效——此时该用 align-items: center，但它只对直接子元素生效

align-items: center 加了还是不居中？检查这三点

Bootstrap 5 的 .navbar 默认是 flex 容器，但 .navbar-brand 内部若混用 <img> 和裸文本（或 <span></span>），它们未必是真正的 flex item。

• 确认 .navbar-brand 自身是否被设为 display: flex 或 display: inline-flex；仅靠外层 .navbar 的 flex 不够
• 检查内部元素是否平级：如果文字被 <strong></strong> 包裹而图片没有，且没统一 display，它们在 flex 布局中可能不同权
• DevTools 里看 computed 样式：若 .navbar-brand 的 display 是 inline 或 block，align-items 根本不触发

小屏幕折叠后 Logo 突然上移，别硬套桌面逻辑

折叠态下 .navbar-collapse 把内容转为垂直堆叠，flex 和 line-height 都失效。此时再加 d-flex align-items-center 不仅无效，还会增加渲染负担。

• 用媒体查询单独修复：@media (max-width: 767.98px) { .navbar-collapse .navbar-brand { padding-top: 12px; padding-bottom: 12px; } }
• 更精准的做法是调图片本身：.navbar-collapse .navbar-brand img { margin-top: 4px; }
• 滚动收缩时 Logo 上浮？大概率是 JS 动态加了 .fixed-header-on 类，需同步加状态级补偿样式，比如 .fixed-header-on .navbar-brand { margin-top: 8px; }

复杂点在于：同一段 CSS 在桌面、折叠、滚动收缩三种状态下行为完全不同，不能只写一套规则。最容易被忽略的是——你改的不是“Logo 居中”，而是“不同上下文下的对齐基准”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！