引导 4 - 将品牌集中在导航栏中

Question

我正在尝试将品牌集中在下面的导航栏中。我尝试更改样式以使文本居中，但我尝试的任何内容都不起作用。我附上了一张它现在的样子的照片。我只需要文本居中而不是向左格式化。

在此处输入图像描述

<nav class="navbar fixed-top flex-md-nowrap navbar-expand-sm navbar-dark shadow" style="padding-top: 0; padding-bottom: 0; background-color:var(--theme-gray)">
<a class="navbar-brand" href="#" style="padding: 0;">
<img src="img/Cama-i Ellam Yui Logo - Header, Large.jpg"  alt="logo" style="height:65px;">
</a>
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>
</div>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Words</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Acknowledgements</a>
</li>
</ul>
</nav>

Answer 1

应用此 CSS：

.navbar-header{
width: 100%;
text-align: center;
}

或

您可以使用 Bootstrap 的 w-100 和文本中心类。

<div class="navbar-header w-100 text-center">
<span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>

Answer 2

您可以使用Media query

@media (min-width: 768px) {
.navbar-brand
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}

Answer 3

在导航栏标题类中使用mx-auto居中对齐。

<div class="navbar-header mx-auto">
<span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>