ブートストラップナビゲーションバーで要素を中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

ブートストラップナビゲーションバーで要素を中央に配置するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-14 08:14:10

オリジナル

886 人が閲覧しました

How Do I Center Elements in a Bootstrap Navbar?

ブートストラップナビゲーションバー内の要素を中央に配置する

ブートストラップナビゲーションバー内で要素を中央に配置しようとすると、難しいように思えるかもしれません。ただし、正しい手法を使用すれば、これは実現可能です。

Bootstrap 4 以降

Bootstrap 4 以降のバージョンでは、調整プロセスを簡素化するフレックスボックスが使用されます。「Web サイト名」などの要素を中央に配置するには、それを含む「nav.navbar-nav」に「mx-auto」クラスを追加します。これにより、左右の「nav.navbar-nav」要素を基準にして中央に配置されます。

例:

<nav class="navbar navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Download</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
    </ul>

    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Rates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

ログイン後にコピー

以前のブートストラップバージョン

Bootstrap バージョン 4 より前の場合、フレックスボックスのネストまたは位置: 絶対を使用してセンタリングが必要です

追加オプション

Navbar に「nav.navbar-nav」が 1 つだけ含まれている場合は、「justify-content-center」を使用してその中央に配置できます。

絶対センタリング

を達成するには絶対センタリングの場合は、位置: 絶対メソッドまたはフレックスボックスネストのいずれかを使用できます。

絶対位置

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

ログイン後にコピー

フレックスボックスネスト

「justify-content-center」を使用して、中央に配置されたアイテムを別のフレックスボックスコンテナ内にネストし、「フレックスフィル」が適用されました。

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

ログイン後にコピー

以上がブートストラップナビゲーションバーで要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。