बूटस्ट्रैप पर div केंद्र में असमर्थ 3

मैं div का एक बहुत केंद्रित करने के लिए के बाद से मैं इस कोड के साथ उदाहरण के लिए 2.1 से 3.0बूटस्ट्रैप पर div केंद्र में असमर्थ 3

करने के लिए मेरे बूटस्ट्रैप उन्नयन में असमर्थ हूं:

<div id="center" class="container"> 
    <div class="row"> 
     <div class="btn-toolbar"> 
      <div class="btn-group"> 
       <a class="btn btn-default" href="#">test</a> 
      </div> 
     </div> 

     <br /> 

     <p>Am I centered ?</p> 
     <a class="btn btn-default" href="#">Back</a> 
    </div> 

</div>

मैं इस नियम था :

#center { 
    margin: 0 auto; 
}

लेकिन परिणाम है: enter image description here

हे आर एक और उदाहरण, कैसे इस केंद्र के लिए:

<div id="center" class="container"> 
    <div class="row"> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
    </div> 
</div>

enter image description here

आपकी मदद

स्रोत

2013-09-26 Stéphane J.

margin: 0 auto; का उपयोग कर यह भी एक चौड़ाई है कि इसके धारक ब्लॉक से छोटी है होना आवश्यक है एक ब्लॉक स्तर तत्व केंद्रित करने के लिए आदेश (auto मूल्य के लिए समझ बनाने के लिए) में - क्योंकि #container अपनी मूल की चौड़ाई फैले है (<body>) वितरित करने के लिए बस कोई मार्जिन नहीं है।

margin: 0 auto; के लिए एक Alernative दृष्टिकोण अपने युक्त ब्लॉक करने के लिए text-align: center; जोड़कर .btn-toolbar यह केंद्रित inline-block के लिए और फिर सेट करने के लिए किया जाएगा। आप दूसरे उदाहरण के लिए एक ही अवधारणा लागू कर सकते हैं:

http://fiddle.jshell.net/52VtD/94/

स्रोत

2013-09-26 23:11:50 Adrift

धन्यवाद यह बटन के लिए महान काम करता है लेकिन मेरे पास है सूची के साथ एक सवाल। एक ही परिणाम होना संभव है लेकिन केंद्रित पाठ के बिना :) http://fiddle.jshell.net/52VtD/99/ –

के लिए धन्यवाद इस उदाहरण में, margin:0 auto काम नहीं करता है क्योंकि तत्व की चौड़ाई 100% है।

.btn-toolbar { 
    width: 50px; 
    margin: 0px auto; 
}

आप पाठ और बटन केंद्रित करने के लिए चाहते हैं, आप वर्ग text-center पेरेंट तत्व को, इस मामले में जोड़ सकते हैं: आप इसे काम करना चाहते हैं, तो आप तत्व पर एक चौड़ाई सेट करने के लिए होगा : .row। इस वर्ग की स्टाइल बस text-align: center है।

<div class="row text-center"> 
    .. 
</div>

EXAMPLE HERE

@Adrift बताते रूप में, यह यह inline-block बनाकर तत्व केंद्रित करने के लिए और अधिक कुशल हो सकता है, जैसा कि आप text-align:center के रूप में करने का विरोध किया margin:0 auto का उपयोग करें और एक निश्चित चौड़ाई सेट करने के लिए बच सकते हैं तत्व पर यह सुनिश्चित करेगा कि तत्व इसकी चौड़ाई के बावजूद केंद्रित है। (example here) - यह मत भूलना कि आप कक्षा के लिए माता-पिता को केवल text-center कक्षा जोड़ सकते हैं।

यह भी ध्यान देने योग्य है कि inline/inline-block तत्व मार्कअप में सफेद-स्थान का सम्मान करते हैं, और इस प्रकार मौजूद होने पर अंतरिक्ष उत्पन्न करते हैं। यदि आप इस स्पेस को हटाना चाहते हैं, तो this answer देखें।

स्रोत

2013-09-26 23:11:43

आप पता चलता है, मैं @Adrift का समाधान पीछा किया लेकिन स्पष्टीकरण के लिए धन्यवाद;) –

बूटस्ट्रैप पर div केंद्र में असमर्थ 3

उत्तर

संबंधित मुद्दे