Wie richtet man den Text der Bootstrap-Navigationsleiste am Bild aus?

Question

Ich verwende die Bootstrap-Navigationsleiste und habe ein Bild in das Navigationsleisten-Branding eingefügt, aber aufgrund der Größe bringt es die Ausrichtung durcheinander. Ich möchte, dass der dazugehörige Text in der Mitte ausgerichtet wird, aber ich weiß nicht, wie ich dafür sorgen kann, dass auch der Text der anderen Schaltfläche daran ausgerichtet wird.

So sieht die Ausgabe aus

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

Ich habe versucht, die Ausrichtung der Navigationselemente zu verwenden, aber egal, was ich mache, es ändert nichts. Dies ist das erste Mal, dass ich Bootstrap verwende, und meine HTML-Kenntnisse sind begrenzt, sodass ich absolut keine Ahnung habe, was ich tun soll: (< /p>

Answer 1

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

a.nav-item {
  color: white;
}

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

[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