如何将引导导航栏文本与图像对齐？

Question

我正在使用引导导航栏，并且我向导航栏品牌插入了一个图像，但由于尺寸的原因，它扰乱了对齐。我希望与其一起的文本与它的中间对齐，但我不知道如何让其他按钮文本也与它对齐。

这就是输出的样子

<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>
                <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>

我尝试在导航项上使用对齐方式，但无论我做什么，它都不会改变任何东西，这是我第一次使用 bootstrap，而且我的 html 知识有限，所以我完全不知道该怎么做:(< /p>

Answer 1

不确定您的实施有什么问题。我尝试使用 bootstrap 文档 中提到的导航容器包装您的代码片段看起来不错：

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}

sssccc
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


  
     Jefferson Robotics
  Underwater
  Aerial
  Land

也许您只是缺少那个包装纸？或者也许您没有在 HTML 文件的静态样式中包含 bootstrap 的样式？

Answer 2

您可以尝试在父元素上的所有 <a> 标记以及 navbar-brand <a> 标记上使用引导程序中的 d-flexalign-items-center 类，如下所示。这将使元素垂直居中。

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  
     Jefferson Robotics
  Underwater
  Aerial
  Land