मैं पृष्ठ पर ट्विटर बूटस्ट्रैप टैब कैसे केंद्रित करूं?

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> 

यह एचटीएमएल टैब सही ढंग से प्रदर्शित करता है, लेकिन बाईं ओर खींच लिया (जो क्या हो ले आते है): यहाँ सीएसएस मैं उपयोग कर रहा हूँ है। मैंने पेज पर केंद्र में टैब प्राप्त करने के लिए सीएसएस के साथ झुकाव करने की कोशिश की है, लेकिन अभी तक कोई भाग्य नहीं है। मैंने सोचा कि अधिक सीएसएस अनुभव वाले किसी को यह पता चल जाएगा कि यह कैसे करें।

एक नोट के रूप में, नेविगेशन गोलियों को केंद्रित करने के बारे में एक और सवाल है, जिसकी मैंने कोशिश की, लेकिन यह सिर्फ सादे नौसेना टैब के साथ काम नहीं करता था।

धन्यवाद।

Answer 1

nav-tabs सूची आइटम स्वचालित रूप से बूटस्ट्रैप द्वारा छोड़ा तो आप हम कंटेनर के लिए text-align:center की विशेषता जोड़ने के लिए है, इसलिए की तरह है पुनर्स्थापित करने के लिए और के बजाय उन्हें inline-block के रूप में प्रदर्शित करते हैं, और मेनू आइटम केंद्रित करने के लिए है करने के लिए जारी किए जाते हैं:

सीएसएस

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

---

संपादित करें: उपयोगकर्ता द्वारा प्रदान की गई आईई 7 + में काम किए गए पैच किए गए संस्करण को नीचे दिए गए टिप्पणियों में नीचे डाला जाता है।

डेमो: 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

स्वीकृत उत्तर सही है। इसे और अनुकूलित किया जा सकता है ताकि आप इसे मानक बाएं संरेखित टैब के साथ-साथ उपयोग कर सकें।

.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; 
} 

इसके इस्तेमाल के लिये जोड़ें "केंद्रित" अपने टैब तत्व

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

Answer 4

के वर्ग तुम बस 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

नव-न्यायोचित मेरे लिए काम करता है ..यह न केवल टैब को केंद्रित करता है बल्कि शीर्ष पर उन्हें अच्छी तरह से फैलाता है। इसलिए जैसे: [: केंद्र गोलियां ट्विटर बूटस्ट्रैप] (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> 

हालांकि स्वीकार किए जाते हैं जवाब अच्छी तरह से काम करता है, मैं