Bootstrap顶部导航栏中非锚点元素无法垂直居中，需自定义nav-center-ele类

我太懂这种头疼的感觉了——Bootstrap顶部导航栏里的文字锚点总能完美垂直居中，但图片、切换开关这类非文本元素却偏偏“不听话”，试了一堆自定义CSS都没搞定。别担心，咱们来打造一个通用的nav-center-ele类，一次性解决这个问题。

核心思路 #

Bootstrap导航栏的默认样式是为文本链接优化的，非文本元素（比如<img>、自定义切换开关）因为自身的尺寸特性，没法直接继承文本的垂直对齐规则。我们需要给这类元素添加专门的对齐规则，同时保证不破坏Bootstrap的原有布局。

自定义CSS代码 #

直接把这段代码加到你的样式文件里：

.nav-center-ele {
  /* 把元素变成flex容器，内部内容垂直居中 */
  display: inline-flex;
  align-items: center;
  /* 调整垂直对齐，适配导航栏的行高 */
  vertical-align: middle;
  /* 可选：限制元素最大高度，避免撑高导航栏 */
  max-height: 100%;
}

/* 针对导航栏内的图片单独优化 */
.nav-center-ele img {
  max-height: 36px; /* 这个数值可以根据你的导航栏高度调整 */
  width: auto;
}

使用方法 #

只需要给导航栏里的图片、切换开关元素加上这个类就行：

<!-- 导航栏中的图片 -->
<a class="nav-link" href="#">
  <img src="your-image.png" class="nav-center-ele" alt="Logo">
</a>

<!-- 导航栏中的切换开关（比如自定义的主题切换） -->
<div class="nav-center-ele">
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="themeSwitch">
    <label class="form-check-label" for="themeSwitch">深色模式</label>
  </div>
</div>

为什么这个方案有效？ #

• display: inline-flex + align-items: center：让元素内部的内容（比如开关的输入框和标签）也能垂直居中，同时保持元素本身在导航栏内的行内特性。
• vertical-align: middle：让元素和导航栏内的文本锚点保持同一基线对齐。
• 图片的max-height限制：避免过大的图片把导航栏高度撑变形，保证整体布局统一。

如果你的导航栏高度和示例不同，只需要调整max-height的数值就行，一般和导航栏的height或min-height保持一致就好。

内容的提问来源于stack exchange，提问作者BLang