我正在使用引导导航栏，并且我向导航栏品牌插入了一个图像，但由于尺寸的原因，它扰乱了对齐。我希望与其一起的文本与它的中间对齐，但我不知道如何让其他按钮文本也与它对齐。
这就是输出的样子
<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>
P粉7970046442024-03-29 11:06:33
不确定您的实施有什么问题。我尝试使用 bootstrap 文档 中提到的导航容器包装您的代码片段看起来不错：
a.nav-item {
color: white;
}
a.nav-item:hover {
color: yellow;
}
sssccc [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
也许您只是缺少那个包装纸？或者也许您没有在 HTML 文件的静态样式中包含 bootstrap 的样式？
P粉1292756582024-03-29 10:36:19
您可以尝试在父元素上的所有 <a> 标记以及 navbar-brand <a> 标记上使用引导程序中的 d-flexalign-items-center 类，如下所示。这将使元素垂直居中。
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Jefferson Robotics