.navbar-brand 看起来偏上是因为图片默认 vertical-align: baseline 导致基线对齐错位；文字需设 line-height: 1，图片应设 height 和 align-self: center 或用 flex 包裹统一居中。
为什么 .navbar-brand 看起来偏上？
默认情况下，Bootstrap 的 .navbar-brand 会和导航项一起被 display: flex 容器（.navbar）按 align-items: center 对齐——但问题常出在 Logo 图片没设高度或未重置 vertical-align。图片默认是 vertical-align: baseline，导致文字基线对齐、视觉上“下沉”，而 Logo 却“浮高”，整体看起来不居中。
常见错误现象：<img src="logo.png" class="navbar-brand"> 没加 height 或 object-fit，文字和图片上下错位；或者用了自定义字体大小但没同步调整行高。
- 确保
.navbar-brand内部元素有明确尺寸：图片加height和width: auto，避免拉伸 - 图片加
align-self: center或统一用vertical-align: middle（仅对 inline 元素有效） - 若混用文字和图片，建议都包裹在
<span></span>或<div> 中并设 <code>display: flex+align-items: centernavbar-brand里放文字时行高不一致怎么办？当
.navbar-brand只含文字（比如 “MyApp”），它继承.navbar的line-height，但不同字体的font-size和line-height渲染效果差异大，尤其在移动端小屏下容易“顶到顶部”。这不是 Bug，而是 CSS 行盒（line box）高度计算方式导致的。- 显式设置
.navbar-brand { line-height: 1; }，让文字高度紧贴字号，再靠 flex 居中兜底 - 避免用
padding-top/padding-bottom微调——这会破坏响应式折叠逻辑 - 如果用了
font-weight: bold或自定义字体，检查是否触发了浏览器字体度量重排，可加font-display: swap缓解
响应式折叠后 Logo 位置错乱怎么修？
Bootstrap 的
.navbar-collapse在md断点以下会变成垂直堆叠，此时.navbar-brand默认仍占整行宽度，且未重置flex行为，导致折叠菜单展开后 Logo 被挤到左侧、文字换行或溢出。- 给
.navbar-brand加flex-shrink: 0，防止它被压缩变形 - 在折叠状态（
@media (max-width: 767.98px)）下，确认.navbar-brand外层没有意外的width: 100%或text-align干扰 - 如果用了
.navbar-expand-md，但实际想在sm就展开，记得同步改 class 并覆盖对应断点的flex-direction
用
gap或margin调间距反而更歪？有人试图用
margin-right给 Logo 加空隙，结果发现折叠后右侧留白过大；或用gap: 0.5rem在.navbar-nav里分隔菜单项，却忘了.navbar-brand不在同一个 flex 容器里——它和.navbar-nav是兄弟节点，不是子项。-
.navbar-brand和.navbar-nav同级，要调横向间距，只能对它们父容器（.navbar）设justify-content: space-between或用ms-auto推导航右 - 不要对
.navbar-brand单独设margin-left/margin-right，除非你确定所有断点下都适用 - 真正需要弹性间隔时，用
<div class="ms-auto"></div>插在.navbar-brand和.navbar-nav之间，比硬写 margin 更健壮
<div class="d-flex align-items-center">，图片设 <code>height: 2rem，文字设line-height: 1，外层.navbar保持默认align-items: center——其余靠 Bootstrap 原生 flex 行为兜底。复杂点在于图片加载时机和字体加载顺序，这两处一动，视觉就可能闪一下。 - 显式设置
