1146

मैं ट्विटर बूटस्ट्रैप 3 में कंटेनर (12 कॉलम) के भीतर एक स्तंभ के आकार का एक केंद्र कैसे बना सकता हूं ?

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

स्निपेट का विस्तार करें

मैं divएक वर्ग .centeredके कंटेनर में केंद्रित होना चाहता हूँ । यदि एक से अधिक divs हैं, तो मैं एक पंक्ति का उपयोग कर सकता हूं , लेकिन अभी मैं divकंटेनर (12 कॉलम) के भीतर केंद्रित एक कॉलम के आकार के साथ चाहता हूं ।

मुझे भी यकीन नहीं है कि उपरोक्त दृष्टिकोण काफी अच्छा है क्योंकि इरादा divआधे से ऑफसेट करने का नहीं है । मुझे बाहर के रिक्त स्थान divऔर divअनुपात में सिकुड़न की सामग्री की आवश्यकता नहीं है । मैं समान रूप से वितरित होने के लिए div के बाहर खाली जगह चाहता हूं (कंटेनर की चौड़ाई एक कॉलम के बराबर होने तक हटना)।

— बीएसआर
स्रोत

1963

<div>बूटस्ट्रैप 3 में एक कॉलम को केंद्रित करने के लिए दो दृष्टिकोण हैं :

दृष्टिकोण 1 (ऑफसेट):

पहला दृष्टिकोण बूटस्ट्रैप की अपनी ऑफ़सेट कक्षाओं का उपयोग करता है, इसलिए इसे मार्कअप में कोई बदलाव नहीं करना पड़ता है और अतिरिक्त सीएसएस नहीं होता है। कुंजी पंक्ति के शेष आकार के आधे हिस्से के बराबर ऑफसेट सेट करने के लिए है । इसलिए, उदाहरण के लिए, आकार 2 का एक कॉलम 5 के ऑफसेट को जोड़कर केंद्रित होगा, यह (12-2)/2।

मार्कअप में ऐसा दिखेगा:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

अब, इस विधि के लिए एक स्पष्ट दोष है। यह केवल भी स्तंभ आकार के लिए काम करता है , इसलिए केवल .col-X-2, .col-X-4, col-X-6, col-X-8, और col-X-10समर्थित हैं।

दृष्टिकोण 2 (पुराना `margin:auto`)

आप सिद्ध तकनीक का उपयोग करके किसी भी स्तंभ का आकार केंद्रित कर सकते हैंmargin: 0 auto; । आपको बस उस फ़्लोटिंग का ध्यान रखना होगा जो बूटस्ट्रैप के ग्रिड सिस्टम द्वारा जोड़ा गया है। मैं निम्नलिखित की तरह एक कस्टम सीएसएस वर्ग को परिभाषित करने की सलाह देता हूं:

.col-centered{
    float: none;
    margin: 0 auto;
}

अब आप इसे किसी भी स्क्रीन आकार में किसी भी स्तंभ के आकार में जोड़ सकते हैं, और यह बूटस्ट्रैप के उत्तरदायी लेआउट के साथ मूल रूप से काम करेगा:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

नोट: दोनों तकनीकों के साथ आप .rowतत्व को छोड़ सकते हैं और कॉलम को एक के अंदर केंद्रित किया जा सकता है .container, लेकिन कंटेनर वर्ग में पैडिंग के कारण आपको वास्तविक कॉलम आकार में न्यूनतम अंतर दिखाई देगा।

अपडेट करें:

चूंकि v3.0.1 बूटस्ट्रैप में एक अंतर्निहित वर्ग है जिसका center-blockउपयोग किया जाता है margin: 0 auto, लेकिन यह गायब है float:none, आप इसे अपने सीएसएस में जोड़ सकते हैं ताकि इसे ग्रिड सिस्टम के साथ काम किया जा सके।

— koala_dev
स्रोत

1

मुझे लगता है कि कोई फ्लोट नहीं है: केंद्र-ब्लॉक नियम में कोई भी नहीं क्योंकि एक स्पष्ट स्वतंत्र नियम है जिसे आप फ़्लोटिंग को साफ़ करने के लिए तत्वों में जोड़ सकते हैं।

— डिएगो फर्नांडो मुरिलो वालेंसी

7

@DiegoFernandoMurilloValenci .clearfixइस मामले में काम नहीं करेगा क्योंकि यह तत्वों पर फ्लोट प्रॉपर्टी को नहीं हटाता है (जिसका उपयोग करने के लिए केंद्र की आवश्यकता होती है margin: 0 auto), यह सिर्फ कंटेनर को किसी भी फ्लोटेड तत्वों के अंदर

— लपेटता है

4

एक कॉलम पर इसका उपयोग नहीं किया जा सकता है, क्योंकि नहींfloat:none;

— airtonix

2

यदि आप अधिक केंद्र बनाना चाहते हैं तो एक पंक्ति में एक कॉलम, इस उत्तर को देखें stackoverflow.com/questions/28683329/…

— कॉनर स्वेंसन

3

बूटस्ट्रैप 4 (नवीनतम संस्करण के रूप में) में ऑफसेट के लिए वाक्यविन्यास बदल गया। एक उदाहरण के रूप में इस प्रतिक्रिया का उपयोग करना: वर्ग कॉल-एमडी-ऑफसेट -5 को अब ऑफसेट-एमडी -5 होना चाहिए।

— lgants

296

का पसंदीदा तरीका कॉलम केंद्रित "ऑफसेट" का उपयोग करने के लिए है (यानी: col-md-offset-3)

बूटस्ट्रैप 3.x केंद्रित उदाहरण

के लिए तत्वों केंद्रित , वहाँ एक है center-block सहायक वर्ग ।

तुम भी उपयोग कर सकते हैं text-centerकरने के लिए केन्द्र पाठ (और इनलाइन तत्व)।

डेमो : http://bootply.com/91632

EDIT - जैसा कि टिप्पणियों में उल्लेख किया गया है,center-blockस्तंभ सामग्री औरdisplay:blockतत्वोंपर काम करता है, लेकिन स्तंभ पर ही काम नहीं करेगा (col-*divs) क्योंकि बूटस्ट्रैप उपयोग करता हैfloat।

अपडेट 2018

अब बूटस्ट्रैप 4 के साथ , केंद्र के तरीकों में बदलाव आया है।

text-centerअभी भी display:inlineतत्वों के लिए उपयोग किया जाता है
mx-autocenter-blockकेंद्र display:blockतत्वों की जगह
offset-* या mx-auto ग्रिड कॉलम को केंद्र में रखने के लिए इस्तेमाल किया जा सकता है

mx-auto(ऑटो x- अक्ष मार्जिन) केंद्रित कर देगा display:blockया display:flexतत्व एक है कि परिभाषित चौड़ाई , ( %, vw, px, आदि ..)। फ्लेक्सबॉक्स का उपयोग ग्रिड कॉलम पर डिफ़ॉल्ट रूप से किया जाता है , इसलिए विभिन्न फ्लेक्सबॉक्स केंद्रित तरीके भी हैं।

डेमो बूटस्ट्रैप 4 क्षैतिज केंद्र

बीएस 4 में वर्टिकल सेंटरिंग के लिए https://stackoverflow.com/a/41464397/171456 देखें

— Zim
स्रोत

31

दुर्भाग्य से यह सहायक वर्ग कॉलम सिस्टम के साथ काम नहीं करता है क्योंकि यह फ्लोट संपत्ति की देखभाल नहीं करता है। उदाहरण के लिए यह डेमो देखें ।

— koala_dev 18

13

इसके लिए केवल एक केंद्र-ब्लॉक {फ्लोट: कोई नहीं चाहिए; }, और यह काम करता है। bootply.com/122268

— मटीस Vad

5

ओपी के बारे में निश्चित नहीं है, लेकिन मुझे यहां text-centerविस्तार की तलाश है - जो किसी भी अन्य उत्तर को प्रदान नहीं करता है। यह मेरा वोट हो जाता है।

— डोमोइरगैटो

1

एक कॉलम पर इसका उपयोग नहीं किया जा सकता है, क्योंकि नहींfloat:none;

— airtonix

98

अब बूटस्ट्रैप 3.1.1 के साथ काम कर रहा है .center-block, और यह सहायक वर्ग कॉलम सिस्टम के साथ काम करता है।

बूटस्ट्रैप 3 हेल्पर क्लास सेंटर ।

कृपया इस jsfiddle DEMO की जाँच करें :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

हेल्पर कक्षाएं केंद्र

col-center-blockहेल्पर क्लास का उपयोग करते हुए पंक्ति स्तंभ केंद्र ।

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

— प्रेषक
स्रोत

मुझे यह float:noneसुनिश्चित करने के बिना काम मिला कि यह सुनिश्चित करने के लिए कि डिव केंद्र-ब्लॉक की style="width : ?px"शैली इस पर लागू होती है। उदाहरण के लिए एक छवि चौड़ाई। 3.2.2 के साथ काम करता है

— कुला

मार्जिन: 0 ऑटो; - इसके बजाय मार्जिन-लेफ्ट + मार्जिन-राइट

— mmike

57

बस अपने कस्टम सीएसएस फ़ाइल में निम्नलिखित जोड़ें। सीधे बूटस्ट्रैप सीएसएस फाइलों का संपादन अनुशंसित नहीं है और सीडीएन का उपयोग करने की आपकी क्षमता को रद्द करता है ।

.center-block {
    float: none !important
}

क्यों?

बूटस्ट्रैप सीएसएस (संस्करण 3.7 और निम्न) मार्जिन का उपयोग करता है : 0 ऑटो; , लेकिन यह आकार के कंटेनर की फ्लोट संपत्ति द्वारा ओवरराइड हो जाता है।

पुनश्च :

इस वर्ग को जोड़ने के बाद, सही क्रम से कक्षाएं लगाना न भूलें।

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

— सैगिव एसईओ
स्रोत

1

मैं बूटस्ट्रैप का उपयोग कर रहा हूं 3.3.7और यह मेरे लिए काम करने का एकमात्र तरीका है!

— इलिग्रेनन

1

यह काम। लेकिन नहीं लगता !importantकि आवश्यक है

— Gianfranco पी।

1

@GianfrancoP। पी। आपका अधिकार, लेकिन ... जो लोड ऑर्डर पर निर्भर करता है और मैं एक फुलप्रूफ विधि प्रदान करना चाहता था।

— सगिव एसईओ

39

बूटस्ट्रैप 3 में अब इसके लिए एक अंतर्निहित वर्ग है.center-block

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

यदि आप अभी भी 2.X का उपयोग कर रहे हैं तो इसे अपने सीएसएस में जोड़ें।

— Schmalzy
स्रोत

यह संभवतः आपको वांछित प्रभाव सबसे आसान देगा। यदि आप अधिक मॉड्यूलर दृष्टिकोण के लिए जा रहे हैं, तो भी -centered वर्ग पर चौड़ाई फेंक दें या दूसरी कक्षा जोड़ें

— मैट लैम्बर्ट

2

फ्लोट जोड़ना: कोई नहीं; ।। किराए पर लेने से आप कंटेनर में कक्षा को स्थानांतरित कर सकते हैं। कोड क्लीनर

— एडम पैटरसन

7

एक कॉलम पर इसका उपयोग नहीं किया जा सकता, क्योंकि नहींfloat:none;

— airtonix

37

केंद्र स्तंभों के लिए मेरा दृष्टिकोण display: inline-blockस्तंभों के text-align: centerलिए और कंटेनर माता-पिता के लिए उपयोग करना है ।

आपको बस CSS क्लास को 'केंद्रित' में जोड़ना होगा row।

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

सीएसएस:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

— स्टेफी
स्रोत

2

यह एकमात्र उत्तर है जिसने 100% समय काम किया - दूसरों ने काम किया, लेकिन तब नहीं जब बूटस्ट्रैप ने अपने मोबाइल दृश्य पर स्विच किया (आइटम बाईं ओर स्थानांतरित किए गए थे)।

— लेवी फुलर

यह केवल एक ही था जिसने मुझे काम किया था। टेकर-ब्लॉक केवल एक कॉलम के लिए काम करता है और मुझे सभी कॉलमों को स्वतंत्र करने की आवश्यकता है कि यह कितने हैं।

— कोज़हसन

केवल समाधान जो मेरे लिए भी काम आया। अन्य लोगों ने केवल तभी काम किया जब ब्राउज़र एक विंडो था, (फुलस्क्रीन नहीं)।

— कीवीकोम्बज

26

बूटस्ट्रैप संस्करण 3 में एक .text- केंद्र वर्ग है।

बस इस वर्ग को जोड़ें:

text-center

यह बस इस शैली को लोड करेगा:

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

उदाहरण:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

— RustyIngles
स्रोत

स्पष्ट करें कि यह वर्ग कहाँ जोड़ा जाएगा?

— एक्यू

हाय @aksu, आपको कोई .css नहीं जोड़ना है। दिए गए उदाहरण को देखें।

— जोशिएट्स 1980

21

बूटस्ट्रैप v4 के साथ, यह सिर्फ जोड़कर पूरा किया जा सकता .justify-content-centerकरने के लिए.row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

— joknawe
स्रोत

15

यह काम। एक hackish तरीका शायद, लेकिन यह अच्छी तरह से काम करता है। यह उत्तरदायी (वाई) के लिए परीक्षण किया गया था।

.centered {
    background-color: teal;
    text-align: center;
}

डेस्कटॉप

उत्तरदायी

— अली गजनी
स्रोत

केवल इसलिए काम करता है क्योंकि तत्व में डिप्लोमा इनलाइन है। एक imgब्लॉक के रूप में सेट किया जा सकता है।

— प्रोफाइलट्विस्ट

शायद आपके पृथक परीक्षण मामले में। मैं .centered img { display: inline; }आपके जवाब में जोड़ दूंगा और फिर इसके बजाय अप वोट के योग्य होगा।

— प्रोफाइलटाइविस्ट

कोई दिक्कत नहीं है। मुझे यकीन है कि ओपी को उसका जवाब मिल जाएगा :)

— अली गजनी

बूटस्ट्रैप 3 में, .text- केंद्र वर्ग मूल रूप से वही काम करता है, जैसा कि मैंने ऊपर सीखा है।

— डोमोइरगैटो

7

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

— वाली
स्रोत

6

कॉल को केंद्र में रखने के लिए - हमें नीचे दिए गए कोड का उपयोग करना होगा। कोला फ़्लोट तत्व के अलावा मार्जिन ऑटो हैं। हम इसे फ्लोट करने के लिए भी सेट करेंगे,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

उपर्युक्त col-lg-1 को केंद्र में रखने के लिए, हम लिखेंगे:

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

Div के अंदर सामग्री को केन्द्रित करने के लिए, का उपयोग करें text-align:center,

.centered {
    text-align: center;
}

यदि आप इसे केवल डेस्कटॉप और बड़ी स्क्रीन पर केंद्रित करना चाहते हैं, तो मोबाइल पर नहीं, तो निम्न मीडिया क्वेरी का उपयोग करें।

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

और केवल मोबाइल संस्करण पर div को केन्द्रित करने के लिए, नीचे दिए गए कोड का उपयोग करें।

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

— आमेर शहजाद
स्रोत

6

बस अपना एक कॉलम सेट करें जो सामग्री को col-xs-12 (मोबाइल-पहले ;-)) में प्रदर्शित करता है और कंटेनर को केवल यह नियंत्रित करने के लिए कॉन्फ़िगर करता है कि आप अपनी केंद्रित सामग्री को कितना चौड़ा करना चाहते हैं:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

स्निपेट का विस्तार करें

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

स्निपेट का विस्तार करें

डेमो के लिए, http://codepen.io/Kebten/pen/gpRNMe :-) देखें

— किरन रयान
स्रोत

6

ऑफसेटिंग का एक और तरीका दो खाली पंक्तियों का होना है, उदाहरण के लिए:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

— लेरॉय
स्रोत

1

2 बेकार divs, col-

— md-

1

मैं सहमत हूँ। मैंने उस तरीके का इस्तेमाल किया क्योंकि यह वास्तव में अच्छी तरह से काम करता है और परीक्षण किया गया है।

— Leoyoy

6

आप text-centerपंक्ति के लिए उपयोग कर सकते हैं और यह सुनिश्चित कर सकते हैं कि आंतरिक divs के पास display:inline-block(नहीं है float)।

जैसा:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

और सीएसएस:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

द फिडेल: http://jsfiddle.net/DTcHh/3177/

— अलीरज़ा फ़ताही
स्रोत

6

बूटस्ट्रैप 4 के साथ आप बस कोशिश कर सकते हैं justify-content-md-centerजैसा कि यहां बताया गया है

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

— होसेन नारिमनी राड
स्रोत

1

@AdamErickson सवाल बूटस्ट्रैप 3 समाधान के लिए विशेष रूप से पूछा गया। जैसा कि यह उत्तर शायद

— बीएस

5

यह शायद सबसे अच्छा जवाब नहीं है, लेकिन इसका एक और रचनात्मक समाधान है। जैसा कि koala_dev द्वारा बताया गया है कि स्तंभ ऑफसेट केवल स्तंभ आकारों के लिए भी काम करता है। हालाँकि, पंक्तियों को नेस्ट करने से आप असमान स्तंभों को भी प्राप्त कर सकते हैं।

मूल प्रश्न के साथ रहने के लिए जहां आप 12 के एक ग्रिड के अंदर 1 का एक कॉलम केंद्रित करना चाहते हैं।

5 का ऑफसेट करके 2 के एक कॉलम को केंद्र में रखें
एक नेस्टेड पंक्ति बनाएं, ताकि आपको अपने 2 कॉलम के अंदर एक नया 12 कॉलम मिलें।
चूँकि आप 1 के एक कॉलम को केन्द्रित करना चाहते हैं, और 1 2 का "आधा" है (जिसे हमने चरण 1 में केंद्रित किया है), अब आपको अपनी नेस्टेड पंक्ति में 6 के एक कॉलम को केन्द्रित करना होगा, जो आसानी से 3 को ऑफसेट करके किया जाता है।

उदाहरण के लिए:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

इस फ़िडल को देखें , कृपया ध्यान दें कि आपको आउटपुट विंडो का आकार बढ़ाना होगा ताकि परिणाम भी दिखाई दे, अन्यथा कॉलम लपेट जाएंगे।

— रीन्डर
स्रोत

5

यह मेरा कोड नहीं है, लेकिन यह पूरी तरह से काम करता है (बूटस्ट्रैप 3 पर परीक्षण किया गया है) और मुझे कॉल-ऑफ़ के साथ गड़बड़ नहीं करना है।

डेमो:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

स्निपेट का विस्तार करें

— बिनर वेब
स्रोत

4

हम टेबल लेआउट तंत्र का उपयोग करके इसे प्राप्त कर सकते हैं:

तंत्र है:

एक कॉलम में सभी कॉलम लपेटें।
उस div को एक निश्चित लेआउट के साथ एक तालिका के रूप में बनाएं।
प्रत्येक स्तंभ को तालिका सेल के रूप में बनाएं।
सामग्री की स्थिति को नियंत्रित करने के लिए ऊर्ध्वाधर-संरेखित संपत्ति का उपयोग करें।

नमूना डेमो यहाँ है

— मोहन डेरे
स्रोत

4

निम्नलिखित स्निपेट को अपने .row या अपने .col के अंदर जोड़ें। यह बूटस्ट्रैप 4 * के लिए है।

d-flex justify-content-center

— थॉमस चिर्वा
स्रोत

3

जैसा कि koala_dev ने अपने दृष्टिकोण 1 में उपयोग किया है, मैं केंद्र-ब्लॉक या मार्जिन के बजाय ऑफसेट विधि को पसंद करूंगा, जिसका सीमित उपयोग है, लेकिन जैसा कि उन्होंने उल्लेख किया है:

अब, इस विधि के लिए एक स्पष्ट खामी है, यह केवल कॉलम आकार के लिए भी काम करता है, इसलिए केवल .col-X-2, .col-X-4, col-X-6, col-X-8 और col-X- 10 समर्थित हैं।

यह अजीब कॉलम के लिए निम्नलिखित दृष्टिकोण का उपयोग करके हल किया जा सकता है।

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

— अभिनव सिंह
स्रोत

3

आप अपने बूटस्ट्रैप में बहुत लचीले समाधान फ्लेक्सबॉक्स का उपयोग कर सकते हैं।

justify-content: center;

अपने कॉलम को केंद्र में रख सकते हैं।

की जाँच करें फ्लेक्स ।

— कठोर
स्रोत

2

क्योंकि मुझे कभी भी एक के .col-भीतर केवल एक ही केंद्र की आवश्यकता नहीं है .row, मैंने .rowअपने लक्ष्य स्तंभों के आवरण पर निम्न वर्ग निर्धारित किया है ।

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

उदाहरण

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

— वाल्टर रोमन
स्रोत

2

उन लोगों के लिए जो आपके ग्रिड को भरने के लिए सटीक संख्या नहीं होने पर स्क्रीन पर कॉलम तत्वों को देख रहे हैं, मैंने कक्षा के नाम वापस करने के लिए जावास्क्रिप्ट का एक छोटा सा टुकड़ा लिखा है:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

यदि आपके पास 5 तत्व हैं और आप mdस्क्रीन पर 3 प्रति पंक्ति चाहते हैं, तो आप ऐसा करते हैं:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

ध्यान रखें, दूसरा तर्क 12 से विभाजित होना चाहिए।

— jsgoupil
स्रोत

2

बूटस्ट्रैप पंक्ति में एक से अधिक स्तंभों को केन्द्रित करने के लिए - और कॉलनों की संख्या विषम है, बस cssउस पंक्ति के सभी कॉलमों में इस वर्ग को जोड़ें :

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

तो आपके HTML में आपके पास कुछ इस तरह है:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

— रुतो कोलिन्स
स्रोत

2

इसे इस्तेमाल करे

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

आप अन्य का उपयोग कर सकते हैं colजैसे कि col-md-2, आदि।

— च उमरजामिल
स्रोत

2

मैं बस कक्षा का उपयोग करने का सुझाव देता हूं text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

— दाधीच सौरव
स्रोत

2

इस कोड को आज़माएं।

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

यहाँ मैंने col-lg-1 का उपयोग किया है, और बड़े उपकरणों पर div को ठीक से केन्द्रित करने के लिए ऑफसेट 10 होना चाहिए। यदि आपको इसे मध्यम से बड़े उपकरणों पर केंद्रित करने की आवश्यकता है, तो बस एलजी को एमडी और इतने पर बदल दें।

— बंगश
स्रोत

2

बूटस्ट्रैप 4 समाधान:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— JanBrus
स्रोत

1

यदि आप इसे अपनी पंक्ति में रखते हैं, तो अंदर के सभी कॉलम केंद्रित होंगे:

.row-centered {
    display: flex;
    justify-content: space-between;
}

— एरण शाबी
स्रोत

तत्व को गैर-उत्तरदायी बनाया।

— gfivehost

1

अधिक सटीक होने के लिए बूटस्ट्रैप की ग्रिड प्रणाली में 12 कॉलम होते हैं और किसी भी सामग्री को केंद्र में रखने के लिए कहते हैं, उदाहरण के लिए, सामग्री एक कॉलम को लेती है। एक को बूटस्ट्रैप के ग्रिड के दो स्तंभों पर कब्जा करने और दो कब्जे वाले स्तंभों के आधे हिस्से पर सामग्री रखने की आवश्यकता होगी।

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-ऑफ़सेट -5' ग्रिड सिस्टम को बता रहा है कि सामग्री को कहां से शुरू करना है।

'col-xs-2' ग्रिड सिस्टम को बता रहा है कि सामग्री के कब्जे में बाएं कॉलम में से कितने में होना चाहिए।

'केंद्रित' एक परिभाषित वर्ग होगा जो सामग्री को केंद्र में रखेगा।

इस प्रकार यह उदाहरण बूटस्ट्रैप की ग्रिड प्रणाली में दिखता है।

कॉलम:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... ऑफसेट ....... .डाटा .......उपयोग नहीं किया........

— टेक
स्रोत

Twitter बूटस्ट्रैप 3 का उपयोग करते हुए एक कॉलम को केंद्र में रखें

दृष्टिकोण 1 (ऑफसेट):

दृष्टिकोण 2 (पुराना margin:auto)

अपडेट 2018

HTML:

सीएसएस:

हम टेबल लेआउट तंत्र का उपयोग करके इसे प्राप्त कर सकते हैं:

नमूना डेमो यहाँ है

दृष्टिकोण 2 (पुराना `margin:auto`)