बूटस्ट्रैप कॉलम में सामग्री को कैसे केंद्र करें?

Question

मैं कॉलम की सामग्री को केंद्र में रखने की कोशिश कर रहा हूं। ऐसा नहीं लगता है कि यह मेरे लिए काम करता है। यहाँ मेरा HTML है:

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

JSFiddle डेमो

Comments

आप क्या करना, संरेखित कोशिश कर रहे हैं spanके बीच में .col-xs-1या संरेखित col-xs-1के केंद्र में .row?

— इगोर इवांका

मैं एक स्तंभ के अंदर या किसी सेल में बेहतर अभी तक किसी भी सामग्री को संरेखित करने की कोशिश कर रहा हूं।

— मार्क

गूंगा दिखने के जोखिम में, इसे किस अक्ष के साथ केन्द्रित करें?

— ल्यूक पुप्लेट

Answer 1

उपयोग:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

के बजाय

<div class="col-xs-1 center-block">

आप बूटस्ट्रैप 3 css का भी उपयोग कर सकते हैं:

<!-- recommended method -->
<div class="col-xs-1 text-center">

बूटस्ट्रैप 4 में अब फ्लेक्स क्लासेस हैं जो सामग्री को केन्द्रित करेंगे:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

ध्यान दें कि डिफ़ॉल्ट रूप से यह हो जाएगा x-axis, जब तक flex-directionहैcolumn

Comments

और कोल-एक्स -१ को कॉल-एक्स -१२ में बदल दें। यह आपका एक टाइपो हो सकता है।

— जड़ता

HTML5 में <div> संरेखित विशेषता समर्थित नहीं है।

— अबीर सुल

यहां तक ​​कि अगर 'एलाइन' विशेषता अभी भी उपलब्ध थी, तो इसे लंबे समय तक उपयोग करने के लिए एक बुरा अभ्यास माना जाता है। कक्षा use पाठ-केंद्र ’का उपयोग करें

— उमर अब्देल बारी

धन्यवाद! इसने बूटस्ट्रैप 3 पद्धति का उपयोग करके मेरे लिए इसे हल किया।

— पैट डॉयल

"टेक्स्ट-सेंटर" वर्ग मेरे लिए काम नहीं करता था क्योंकि मेरे पास एक बटन और एक लोडिंग स्पिनर div है। बूटस्ट्रैप क्लास को जोड़ना "डी-फ्लेक्स जस्टिफाई-कंटेंट-अराउंड" मेरे लिए हल हुआ।

— रोजर संपािो

Answer 2

[अद्यतित दिसंबर 2020]:5.0 बूटस्ट्रैप का परीक्षण किया और शामिल संस्करण।

---

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

यदि आप में से कोई (मेरे जैसा) इस सवाल पर अड़ा हुआ है और वर्तमान बूटस्ट्रैप 5.0 (2020) और 4.5 (2019) ढांचे का उपयोग करके उत्तर की तलाश कर रहा है, तो यहां समाधान है।

बूटस्ट्रैप 4.5 और 5.0

d-flex justify-content-centerअपने कॉलम div पर उपयोग करें । यह सब कुछ उस कॉलम के अंदर केंद्रित करेगा।

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

यदि आप पाठ को कॉल के अंदर संरेखित करना चाहते हैं तो उपयोग करें text-center

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

यदि आपके पास कॉलम के अंदर पाठ और छवि है, तो आपको उपयोग करने की आवश्यकता है d-flex justify-content-centerऔर text-center।

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

Answer 3

बूटस्ट्रैप नामकरण परंपराएं अपनी खुद की शैलियों को ले जाती हैं, col-XS-1 एक स्तंभ को संदर्भित करता है जिसमें युक्त तत्व का 8.33% चौड़ा है। आपका पाठ, संभवतः सबसे अधिक निर्दिष्ट चौड़ाई से अधिक विस्तारित होगा, और संभव नहीं है कि वह इसके भीतर केंद्रित हो। यदि आप चाहते हैं कि यह आपको विवश करे, तो आप सीएसएस वर्ड-ब्रेक जैसे कुछ का उपयोग कर सकते हैं।

एक तत्व के भीतर सामग्री को केंद्रित करने के लिए जो पाठ से परे विस्तार करने के लिए पर्याप्त है, आपके पास दो विकल्प हैं।

विकल्प 1: HTML केंद्र टैग

<div class="row">
  <div class="col-xs-1 center-block">
    <center>
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </center>
  </div>
</div>

विकल्प 2: CSS पाठ-संरेखित करें

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

यदि आप स्तंभ की चौड़ाई के लिए सब कुछ करना चाहते थे

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

अद्यतन - बूटस्ट्रैप के पाठ-केंद्र वर्ग का उपयोग करना

<div class="row">
  <div class="col-xs-1 center-block text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

फ्लेक्सबॉक्स विधि

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

Comments

हां, अगर मैं xs के बजाय lg कॉलम का उपयोग करता हूं तो यह काम करने लगता है। लेकिन अगर मेरे पास सिर्फ एक कॉलम है, तो उस कॉलम को उतनी जगह नहीं लेनी चाहिए जितनी उपलब्ध है? मुझे कैसे पता चलेगा कि तीन अलग-अलग प्रस्तावों पर तीन ब्राउज़रों में काम करने के तथ्य को देखते हुए किस कॉलम का उपयोग करना है?

— मार्क

बूटस्ट्रैप कॉलम उत्तरदायी प्रतिशत आधारित चौड़ाई का उपयोग करते हैं, इसलिए उन्हें संकल्प की परवाह किए बिना काफी समान होना चाहिए। हालाँकि, यदि आप चाहते हैं कि जब वे अलग-थलग हों तो 100% चौड़ाई लें, तो आपको चौड़ाई और न्यूनतम चौड़ाई गुणों को ओवरराइड करना होगा।

— 20

Answer 4

चीजों को जटिल करने की जरूरत नहीं है। बूटस्ट्रैप 4 के साथ, आप बस मार्जिन ऑटो क्लास का उपयोग करके एक कॉलम के अंदर क्षैतिज रूप से आइटम संरेखित कर सकते हैंmy-auto

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

Answer 5

फ्लेक्स बॉक्स का उपयोग करके बूटस्ट्रैप 4, क्षैतिज और ऊर्ध्वाधर संरेखित सामग्री

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

बूटस्ट्रैप क्लास संरेखित-आइटम-केंद्र और औचित्य-सामग्री-केंद्र का उपयोग करें

.page-hero {
  height: 200px;
  background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="page-hero d-flex align-items-center justify-content-center">
  <h1>Some text </h1>
</div>

Comments

स्वीकार किए गए उत्तर की तुलना में यह बहुत बेहतर उत्तर है

— माहिर इस्लाम

Answer 6

के text-centerबजाय का उपयोग करें center-block।

या center-blockस्पैन तत्व पर उपयोग करें (मैंने कॉलम को व्यापक किया ताकि आप संरेखण को बेहतर देख सकें):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

Answer 7

यह एक सरल तरीका है।

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

संख्या 6 नियंत्रण चौड़ाई स्तंभ की।

Answer 8

//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

Answer 9

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center

Answer 10

आप float:none; margin:auto;कॉलम सामग्री को केंद्रित करने के लिए स्टाइलिंग जोड़ सकते हैं ।

Answer 11

यदि उपरोक्त कार्य में से कोई भी नहीं (जैसे कि मेरे मामले में एक इनपुट को केंद्रित करने की कोशिश कर रहा है), तो मैंने Boostrap 4 ऑफसेट का उपयोग किया:

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>