CSS를 사용하여 Bootstrap 3에서 Navbar 콘텐츠를 중앙에 어떻게 배치합니까?

CSS를 Navbar 콘텐츠 중앙에 배치

Bootstrap의 Navbar 내 콘텐츠를 중앙에 배치하는 데 어려움을 겪고 계십니까? 포기하지 마세요! 제공된 HTML 및 CSS 코드 조각을 사용하여 문제를 해결해 보겠습니다.

문제:

Bootstrap 3을 사용하지만 기존 방법은 탐색 모음 내에서 콘텐츠를 중앙에 정렬하지 않습니다.

HTML 코드:

참조용으로 제공됨(여기에는 포함되지 않음).

수정된 CSS:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

설명:

• 제거된 부동소수점: .navbar .navbar-nav에서 왼쪽으로 이동하여 내부 탐색을 중앙에 배치합니다.
• 디스플레이 설정: 인라인 블록을 사용하여 수평 정렬을 유지합니다.
• 조정된 수직 정렬: 적절한 정렬을 위해 상단.
• 접힌 내용을 정렬하기 위해 .navbar .navbar-collapse가 포함되었습니다. navbars.

향상된 스니펫:

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!-- ... -->
    </ul>
  </div>

  <!-- ... -->
</div>

반응형 조정:

중앙 집중 효과를 접히지 않은 탐색 모음에 이 미디어를 추가하세요. 쿼리:

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

이제 탐색 모음 콘텐츠가 접힌 상태와 접힌 상태 모두에서 쉽게 중앙에 배치됩니다.

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