बूटस्ट्रैप 2 के साथ एक div कैसे केंद्र करें?

Question

http://twitter.github.com/bootstrap/scaffolding.html

मैंने सभी संयोजनों की तरह कोशिश की:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

या

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

बदल गया अवधि और ऑफसेट संख्या ...

लेकिन मुझे एक साधारण बॉक्स पूरी तरह से एक पृष्ठ पर केंद्रित नहीं मिल सकता है :(

मैं सिर्फ एक 6-कॉलम चौड़ा बॉक्स केंद्रित चाहता हूं ...

---

संपादित करें:

के साथ किया

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

लेकिन बॉक्स बहुत चौड़ा है, क्या कोई तरीका है जो मैं इसे स्पैन 7 के साथ कर सकता हूं?

span7 offset2बाएं span7 offset3अतिरिक्त पैडिंग को दाईं ओर अतिरिक्त पैडिंग देता है ...

Comments

क्या आप पृष्ठ पर एक बॉक्स को क्षैतिज रूप से देखना चाहते हैं? क्योंकि containerवर्ग पहले से ही ऐसा करता है, सोचा कि आप एक छोटे से बॉक्स को देख सकते हैं। या क्या आप पृष्ठ पर क्षैतिज और लंबवत दोनों तरह के बॉक्स को देख रहे हैं?

— एंड्रेस इलिच

एक बॉक्स बात आप कहते हैं? । । । डेवलपर दुनिया में हम कहते हैं कि एक div

— pythonian29033

आप बूटस्ट्रैप के किस संस्करण का उपयोग कर रहे थे? इसे शीर्षक में प्रतिबिंबित किया जाना चाहिए क्योंकि इसे देखने वाले लोग यहां समाप्त हो जाएंगे और पुराने कोड देखेंगे।

— जीलार्डो

Answer 1

, आकार आप चाहते करने के लिए div ही सिकुड़ तो जैसे अवधि आकार को कम करने के द्वारा के अलावा ... class="span6 offset3", class="span4 offset4", आदि ... के रूप में सरल रूप में कुछ style="text-align: center"div पर प्रभाव आप देख रहे हैं हो सकता था

आप किसी भी सेट ऑफ़सेट के साथ स्पैन 7 का उपयोग नहीं कर सकते हैं और पृष्ठ पर केंद्रित स्पैन प्राप्त कर सकते हैं (क्योंकि कुल स्पैन = 12)

Comments

ज़ुहैब अली के जवाब पर विचार करें। text-align: केंद्र <div> के भीतर तत्वों को केंद्रित करने के लिए काम नहीं करता है। ऑफसेट * वर्ग वास्तव में घटक केंद्रित नहीं है। यह महज केंद्रीकरण का भ्रम पैदा कर रहा है। आप इसे विंडो को आकार देकर और यह देखते हुए सत्यापित कर सकते हैं कि घटक केंद्रित नहीं हैं। जब आप ज़ुहैब अली की विधि लागू करते हैं, तो घटक केंद्रित रहते हैं।

— BigSauce

इनलाइन स्टाइल (शैली = "टेक्स्ट-संरेखित: केंद्र") जोड़ने के बजाय, वर्ग "केंद्र-ब्लॉक" जोड़ें और अपने केंद्रित div के भीतर केंद्रित सामग्री प्राप्त करें।

— शॉन टेलर

col-md-4 या col-lg-4 एक मार्जिन के बराबर है: 0 ऑटो; ?

— ज्रुज़फ़ा

Answer 2

बूटस्ट्रैप के स्पैन बाईं ओर मंगाई गई हैं। यह सब उन्हें केंद्र में ले जाता है इस व्यवहार को ओवरराइड करता है। मैं इसे अपनी स्टाइलशीट में जोड़कर ऐसा करता हूं:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

यदि आपके पास यह वर्ग परिभाषित है, तो बस इसे अवधि में जोड़ें और आप जाने के लिए अच्छे हैं।

<div class="span7 center"> box </div>

ध्यान दें कि इस कस्टम सेंटर क्लास को बूटस्ट्रैप css के बाद परिभाषित किया जाना चाहिए । आप उपयोग कर सकते हैं !importantलेकिन यह अनुशंसित नहीं है।

Comments

हाँ! शुक्रिया, ज़ुहैब! पूरी तरह से काम किया। इस उत्तर को इस प्रश्न के सही उत्तर के रूप में वोट दिया जाना चाहिए।

— BigSauce

@ZuhaibAli float: none;मेरी समस्या को हल करना।

— SIFE

मैं रेल का उपयोग कर रहा हूं, इसलिए मैं केवल यह इंगित करना चाहता हूं कि application.css में, *= require bootstrap.min पहले जोड़ें *= require_selfऔर*= require_tree

यह मेरे लिए काम नहीं कर display: tableरहा था , लेकिन इसे जोड़ने के लिए लग रहा था

— पीटर बर्ग

बहुत बढ़िया जवाब! इसके लिए अभी से काम कर रहे हैं।

— सर्व-बॉट 22

Answer 3

Bootstrap3 में वह .center-blockवर्ग है जिसका आप उपयोग कर सकते हैं। इसे के रूप में परिभाषित किया गया है

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

यहाँ प्रलेखन ।

Answer 4

यदि आप फुल-बूटस्ट्रैप (और ऑटो लेफ्ट / राइट तरीके से नहीं) जाना चाहते हैं, तो आपको एक पैटर्न की आवश्यकता होती है जो 12 कॉलम जैसे 2 ब्लैंक, 8 कॉन्टेंट, 2 ब्लैंक में फिट होगा। यही सेटअप करेगा। यह केवल -md- वेरिएंट को कवर करता है , मैं इसे col-xs-12 जोड़कर छोटे के लिए पूर्ण आकार में स्नैप करता हूं

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Comments

क्या वह बूस्ट में केंद्र को विभाजित करने का एक वैध तरीका है?

— गविंद्र कालिकापसारौड

Div की सामग्री केंद्रित नहीं है, लेकिन div स्वयं है।

— क्रेग

Answer 5

लगता है जैसे तुम सिर्फ एक एकल कंटेनर संरेखित करना चाहते थे। बूटस्ट्रैप फ्रेमवर्क एक से अधिक उदाहरण के लिए हो सकता है, आप अपने स्टाइल के साथ सिर्फ एक स्वसंपूर्ण div हो सकता है, जैसे कुछ:

<div class="login-container">
  <!-- Your Login Form -->
</div>

और शैली:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

अगर आपको बूटस्ट्रैप .containerdiv के भीतर कहीं नेस्टेड है तो यह ठीक काम करना चाहिए ।

Answer 6

क्लास सेंटरकंटेंट्स जोड़ें

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

मेरे लिए @ZuhaibAli कोड तरह का काम है लेकिन मैंने इसे थोड़ा बदल दिया है:

मैंने css में एक नया क्लास बनाया

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

तो div बन गया

<div class="center col-md-6"></div>

मैंने div की चौड़ाई के लिए col-md-6 जोड़ा, जिसका अर्थ है कि इस स्थिति में div आधा आकार है, बूटस्ट्रैप में 1 -12 col md हैं।

Answer 8

इस मार्गदर्शन का पालन करें https://getbootstrap.com/docs/3.3/css/

उपयोग .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 9

वर्ग के साथ एक माता पिता div में div लपेट rowतो शैली जोड़ margin:0 auto;div करने के लिए

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>