페이지의 트위터 부트 스트랩 탭을 중앙에 배치하려면 어떻게합니까?

Question

토글 가능한 탭을 만들 때 트위터 부트 스트랩을 사용하고 있습니다.

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
    </ul> 
</div> 

이 HTML이 제대로 탭을 표시하지만 (일이되어 무엇 인) 왼쪽으로 당겨 : 여기 내가 사용하고있어 CSS입니다. 나는 페이지를 중심으로 탭을 얻으려고 CSS로 꼼꼼하게 시도했지만 아직 행운은 없다. 더 많은 CSS 경험을 가진 사람이이 작업을 수행하는 방법을 알고 있다고 생각했습니다.

참고로, 시도한 센터링 알약에 대해 다른 질문이 있지만 단순한 일반 탭에서는 작동하지 않습니다.

감사합니다.

Answer 1

nav-tabs 목록 항목이 자동으로 우리가 같은 컨테이너에 text-align:center의 속성을 추가 할 것을 다시 대신 inline-block로를 표시하고 메뉴 항목을 중앙에 할 수 있도록 부트 스트랩에 의해 왼쪽에 떠내려 :

CSS

.nav-tabs > li, .nav-pills > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    zoom:1; /* hasLayout ie7 trigger */ 
} 

.nav-tabs, .nav-pills { 
    text-align:center; 
} 

데모 : 여기 http://jsfiddle.net/U8HGz/2/show/ 편집 : http://jsfiddle.net/U8HGz/2/

---

편집 : 사용자가 제공 한 IE7 +에서 작동하는 패치 된 버전 @My Head 아래 주석에 아픔이 있습니다.

데모 : 여기 http://jsfiddle.net/U8HGz/3/show/ 편집 : http://jsfiddle.net/U8HGz/3/

Answer 2

내 탭을 설정할 때 간단히

margin-left:50%; 

를 추가하는 나를 위해 일했다.

예 :

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;"> 

Answer 3

허용되는 답변은 완벽합니다. 추가로 사용자 정의 할 수 있으므로 표준 왼쪽 맞춤 탭과 나란히 사용할 수 있습니다. 당신의 탭 요소

<ul class="nav nav-tabs centered" > 
.. 
</ul> 

Answer 4

에 클래스 "를 중심으로"

.nav-tabs.centered > li, .nav-pills.centered > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    zoom:1; /* hasLayout ie7 trigger */ 
} 

.nav-tabs.centered, .nav-pills.centered { 
    text-align:center; 
} 

를 사용하려면 추가, 당신은 당신의 항법 탭의 중심을 bootstrap grid를 사용할 수 있습니다. 부트 스트랩 그리드는 12 개의 등호 열로 나누어 져 있으므로 4 열 오프셋을 사용하여 탐색에 4 개의 열을 쉽게 사용할 수 있습니다.

<div class="col-sm-4 col-sm-offset-4">.

따라서 왼쪽과 오른쪽에 4 개의 열이있는 페이지 중간에 네비게이션 (반응 형 솔루션)이 표시됩니다.

그리드가 반응 형 웹 페이지를 만드는데 유용하다는 것을 발견했습니다. 행운을 빈다!

<div class="row-fluid"> 
    <div class="col-sm-12"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <ul class="nav nav-tabs"> 
     <li><a href="#home" data-toggle="tab">Home</a></li> 
     <li><a href="#profile" data-toggle="tab">Profile</a></li> 
     <li><a href="#messages" data-toggle="tab">Messages</a></li> 
     <li><a href="#settings" data-toggle="tab">Settings</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 5

nav-justified works for me ..이것은 탭을 중심에 놓을뿐만 아니라 꼭대기에 잘 펼칩니다. 그래서 같은 : [: 센터 환약 트위터 부트 스트랩 (http://stackoverflow.com/questions/

이 허용 대답은 잘 작동하더라도

<ul class="nav nav-tabs nav-justified"> 
    <li><a href="#Page1">Page1</a></li> 
    <li><a href="#Page2">Page2</a></li> 
    <li><a href="#Page3">Page3</a></li> 
    <li><a href="#Page4">Page4</a></li> 
    </ul> 

, 내가의