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

或

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

<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

使用 navbar-header 类中的mx-auto居中对齐。

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

Bootstrap 4-将品牌集中在导航栏上

3 个答案: