css - ट्विटर बूटस्ट्रैप 3 का उपयोग कर एक कॉलम केंद्र




twitter-bootstrap twitter-bootstrap-3 (19)

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

स्टार्टर fiddle देखें।

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

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

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


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

तंत्र है -

  1. एक div में सभी कॉलम लपेटें
  2. निश्चित लेआउट के साथ एक div के रूप में उस div बनाओ
  3. प्रत्येक कॉलम को टेबल सेल के रूप में बनाएं
  4. सामग्री स्थिति को नियंत्रित करने के लिए लंबवत-संरेखण गुण का उपयोग करें

नमूना डेमो here


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

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

'col-xs-offset-5' ग्रिड सिस्टम कह रहा है जहां सामग्री को रखना शुरू करना है।

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

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

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

कॉलम:

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

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


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

justify-content: center;

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

इस लिंक को https://css-tricks.com/almanac/properties/f/flex/


आप पंक्ति के लिए 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/


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

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 से विभाजित होना चाहिए।


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

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

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

<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 उपयोग 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;
    }
}

क्योंकि मुझे केवल एक सिंगल को .col- की जरूरत नहीं है .col- एक .col- भीतर, मैंने अपने लक्ष्य कॉलम के रैपिंग .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>

जोड़ने के लिए मत भूलना !important । फिर आप सुनिश्चित कर सकते हैं कि तत्व वास्तव में केंद्र में होगा:

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

बस अपना एक कॉलम सेट करें जो 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 देखें :-)


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

दृष्टिकोण 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: 0 auto; का उपयोग कर किसी कॉलम आकार को केंद्रित कर सकते हैं margin: 0 auto; तकनीक, आपको बस फ्लोटिंग की देखभाल करने की आवश्यकता है जो बूटस्ट्रैप के ग्रिड सिस्टम द्वारा जोड़ा जाता है। मैं निम्नलिखित कस्टम सीएसएस वर्ग को परिभाषित करने की अनुशंसा करता हूं:

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

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

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

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

अद्यतन करें:

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


बूटस्ट्रैप पंक्ति में एक से अधिक स्तंभों को केन्द्रित करने के लिए - और कोलों की संख्या विषम है, बस उस पंक्ति में सभी कॉलम में इस 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;
}

तो आपके एचटीएमएल में आपके पास कुछ ऐसा है:

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

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

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

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

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


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

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

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

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

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

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


यहां आपके प्रश्न का समाधान है, अगर यह आपके लिए काम करता है तो कृपया इसे चिह्नित करें, इससे अन्य डिजाइनरों की मदद मिलेगी।

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

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


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

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

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

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

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

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

2018 अपडेट करें

अब बूटस्ट्रैप 4 के साथ, केंद्रिंग विधियां बदल गई हैं ..

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

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

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

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


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

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

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


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




centering