在 Bootstrap 4 的导航栏中将文本居中时出现问题

Question

我在 Bootstrap 中创建了一个导航栏，我想将其中的内容居中。

<nav class="navbar navbar-light bg-light">
  <div class="container"> 
    <span class="navbar-brand mb-0 h1">
      <i class="bi bi-list-check"></i>
      Nav Text
    </span> 
  </div>
</nav>

在 CSS 文件中，我尝试了几种方法，但没有任何效果。例如 flex:

.navbar { 
  display: flex;
  justify-content: center;
}

似乎没有什么影响导航栏。我不知道为什么。

Answer 1

您的“导航文本”文本位于具有 class .container 的 div 元素内。此 div 位于另一个 nav 元素内，该元素具有作为 flexbox 容器的 class navbar。默认样式（您正在使用的 boostrap）将内容对齐到 flexbox 的开头（justify-content:flex-start）。您必须使用 justify-content 的值 center 覆盖此默认样式。此外，您必须使用 !important 来覆盖默认样式。请看这张截图。

https://prnt.sc/1xfrtcp

下面是示例代码。

.navbar > .container {
justify-content:center!important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-light bg-light">
  <div class="container"> 
    <span class="navbar-brand mb-0 h1">
      <i class="bi bi-list-check"></i>
      Centered Nav Text
    </span> 
  </div>
</nav>

在 Bootstrap 4 的导航栏中将文本居中时出现问题

Having problem with centering text in a Navbar in Bootstrap4

html

css

navbar

bootstrap-4