html - Bootstrap 4-将品牌在导航栏中居中

This question already has answers here:

How to center nav-items in Bootstrap? [duplicate]
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
我正在尝试在下面的导航栏中将品牌居中。我尝试更改样式，以使文本居中，但没有任何尝试。我附上一张现在的样子的照片。我只需要将文本居中而不是将其格式化为左侧即可。

enter image description here

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

最佳答案

应用此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>