将标题与居中的导航栏对齐

Question

我使用的是 bootstrap 4.6，但我不知道如何将我的标题与导航栏文本垂直对齐，以便它具有响应性。导航栏具有右对齐的项目，因此文本不会像图 3 那样居中到页面中间。

.jumbotron {
  background: #37474F;
  color: white;
  padding: 10px;
  margin-top: -1.05rem;
  margin-bottom: 0;
}

.jumbotron h4 {
  margin-left: 40px;
  margin-right: auto;
  width: 30em;
  margin: 0 auto;
}

.navbar {
  margin-bottom: 0;
  background-color: #3F729B;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">

<div class="jumbotron jumbotron-fluid p-3">
  <h4>QC-19 : Le site officel de la réponse COVID-19 du Québec</h4>
</div>

<nav class="navbar navbar-expand-sm">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.html">
        <fa-icon [icon]="faHome"></fa-icon> Accueil</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="vaccin.html">
        <fa-icon [icon]="faDisease"></fa-icon> Maladie</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.who.int/" target="_blank">
        <fa-icon [icon]="faSyringe"></fa-icon> Vaccin</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
        <fa-icon [icon]="faAllergies"></fa-icon> Prévention</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
        <fa-icon [icon]="faVials"></fa-icon> Test</a>
    </li>
  </ul>
  <span class="navbar-nav mx-auto">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">OMS</a>
        <a class="nav-link" href="https://www.icao.int/covid">English</a>
    </span>
</nav>

Answer 1

你可以这样做：

.jumbotron {
  background: #37474f;
  color: white;
  padding: 10px;
  margin-bottom: 0;
}

.jumbotron h4 {
  text-align: center;
  width: 30em;
  margin: 0 auto;
}

.box {
  margin-bottom: 0;
  background-color: #3f729b;
}

.navbar {
  width: 44%;
  margin: auto;
}

.navbar a {
  text-decoration: none;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron jumbotron-fluid p-3">
  <h4>QC-19 : Le site officel de la réponse COVID-19 du Québec
  </h4>
</div>

<div class="box">
  <nav class="navbar navbar-expand-sm">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <fa-icon [icon]="faHome"></fa-icon> Accueil
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="vaccin.html">
          <fa-icon [icon]="faDisease"></fa-icon> Maladie
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.who.int/" target="_blank">
          <fa-icon [icon]="faSyringe"></fa-icon> Vaccin
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
          <fa-icon [icon]="faAllergies"></fa-icon> Prévention
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
          <fa-icon [icon]="faVials"></fa-icon> Test
        </a>
      </li>
    </ul>
    <span class="navbar-nav mx-auto">
            <a class="nav-link" href="https://www.icao.int/covid" target="_blank">OMS</a>
            <a class="nav-link" href="https://www.icao.int/covid">English</a>
        </span>
  </nav>
</div>

为了更完美的布局添加一些媒体查询！

? Check it in action on Codepen