Wie richtet man den Text der Bootstrap-Navigationsleiste am Bild aus?
P粉221046425
P粉221046425 2024-03-28 14:13:44
0
2
409

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>

P粉221046425
P粉221046425

Antworte allen(2)
P粉797004644

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

a.nav-item {
  color: white;
}

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

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

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

P粉129275658

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

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage