如何让Bootstrap导航栏文字与品牌图片垂直居中对齐？

你的问题出在品牌区图片高度超过导航栏默认高度，导致导航项默认垂直对齐方式和品牌区不一致。可以用Bootstrap自带的布局类快速解决：

方法一：给导航项容器添加垂直居中类 #

把所有导航项放在.navbar-nav容器里，并加上align-items-center类，让容器内的所有导航项垂直居中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" id="home" href="/">
    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
    Jefferson Robotics
  </a>
  <div class="navbar-nav align-items-center">
    <a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
    <a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
    <a class="nav-item nav-link" id="earth" href="/land">Land</a>
  </div>
</nav>

方法二：给单个导航项添加对齐类 #

如果不想调整容器结构，直接给每个.nav-link加上align-middle类，也能让导航项和品牌区文字垂直对齐：

<a class="nav-item nav-link align-middle" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link align-middle" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link align-middle" id="earth" href="/land">Land</a>

这两种方法都利用Bootstrap内置的布局类，不需要写额外CSS，适合新手快速解决问题。

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