试图将导航栏链接居中引导 4 [重复]答案

【问题标题】：Trying to center navbar links bootstrap 4 [duplicate]试图将导航栏链接居中引导 4 [重复]
【发布时间】：2019-08-31 15:23:40
【问题描述】：

我试图将我的链接放在 h1 下方，但没有任何效果。这就是我现在所拥有的，我希望得到任何帮助或指点！这是我的 h1 标签

<div class="container-fluid p-5 bg-success header-body text-center">
  <h1 id="high-credit-top-text">
    <a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
  </h1>

<nav class="navbar navbar-expand-lg navbar-light bg-success">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="container justify-content-center">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="information.php">Infomartion</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

【问题讨论】：

你想用纯 html 将它们居中？你的 CSS 在哪里？

标签： html css bootstrap-4

【解决方案1】：

如果您尝试将.nav-item 链接水平居中，则将引导类justify-content-center 添加到ul 类navbar-nav 标记

<ul class="navbar-nav justify-content-center">
  <li class="nav-item active">
    <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white"         href="information.php">Infomartion</a>
  </li>
</ul>

示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
  <h1 id="high-credit-top-text">
    <a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
  </h1>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-success">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <div class="container justify-content-center">
      <ul class="navbar-nav justify-content-center">
        <li class="nav-item active">
          <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="information.php">Infomartion</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：