Twitter Bootstrap Navbar 링크를 중앙에 배치하는 방법은 무엇입니까?

Twitter Bootstrap Navbar 링크 중앙 집중화

Twitter Bootstrap의 Navbar 링크를 중앙에 정렬하려고 시도하는 동안 사용자는 제안된 CSS:

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

그러나 대체 솔루션이 존재합니다.

접근 방법 1: 인라인 블록 표시

중앙에 위치한 메뉴 항목은 다음을 통해 달성할 수 있습니다. navbar 및 해당 li 요소의 표시 속성을 인라인 블록으로 설정하여 부동 소수점 없이 나란히 표시되도록 합니다.

.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

접근 방법 2: 사용자 정의 클래스

또는 "center"와 같은 사용자 정의 클래스를 적용하면 다른 페이지 섹션과의 잠재적인 충돌을 방지할 수 있습니다.

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

그리고 해당 CSS:

.center .navbar .nav,
.center .navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

하위 메뉴 정렬 수정

마지막으로 하위 메뉴 항목을 왼쪽으로 재정렬하려면 다음 CSS가 필요합니다.

.center .dropdown-menu {
    text-align: left;
}

위 내용은 Twitter Bootstrap Navbar 링크를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!