Bootstrap Navbar에서 요소를 중앙에 어떻게 배치합니까?

Bootstrap Navbar에서 요소를 중앙에 배치

Bootstrap navbar 내에서 요소를 중앙에 배치하려고 할 때 어렵게 보일 수 있습니다. 그러나 올바른 기술을 사용하면 달성할 수 있습니다.

Bootstrap 4 이상

Bootstrap 4 이상 버전은 정렬 프로세스를 단순화하는 Flexbox를 활용합니다. "웹 사이트 이름"과 같은 요소를 중앙에 배치하려면 해당 요소가 포함된 "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 이전 버전의 경우 Flexbox 중첩 또는 위치를 사용하여 가운데 맞춤이 필요함: 절대

추가 옵션

Navbar에 "nav.navbar-nav"가 하나만 포함된 경우 "justify-content-center"를 사용하여 중앙에 배치할 수 있습니다. 내용입니다.

절대 센터링

절대 센터링을 달성하려면 위치: 절대 방법 또는 가변상자 중첩을 사용할 수 있습니다.

절대 위치

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

플렉스박스 중첩

"justify-content-center" 및 "flex-fill"이 적용된 다른 flexbox 컨테이너 내에 중앙에 있는 항목을 중첩합니다.

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

위 내용은 Bootstrap Navbar에서 요소를 중앙에 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!