बूटस्ट्रैप 4 में एक कॉलम के अंदर सामग्री को केंद्र में रखें

Question

मुझे समस्या को ठीक करने के लिए सहायता की आवश्यकता है, मुझे बूटस्ट्रैप 4 में कॉलम के अंदर सामग्री को केंद्र में रखने की आवश्यकता है, कृपया नीचे मेरा कोड ढूंढें

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

Comments

का उपयोग कर सकते हैं class="text-center"।

— मिहाई अलेक्जेंड्रू-आयनुत

मैंने इसका उपयोग करने की कोशिश की, लेकिन यह बूटस्ट्रैप 4 के लिए काम नहीं कर रहा है, अकेले पाठ केंद्रित हो रहा है, लेकिन मुझे "3-नॉक-इंफो-कनेक्शन" वर्ग के साथ div की आवश्यकता है जो कि कॉल -3 div के अंदर संरेखित होना चाहिए।

— प्रवीण कुमार

मैंने कंटेनर को केन्द्रित करने की पारंपरिक विधि का उपयोग किया ।nauk-info-कनेक्शन {सीमा-त्रिज्या: 50%; बॉर्डर: 1px ठोस $ nauk- नारंगी; ऊंचाई: 100 पीएक्स; चौड़ाई: 100px; मार्जिन: 0 ऑटो; }

— प्रवीण कुमार

Answer 1

बूटस्ट्रैप 4 में कई क्षैतिज केन्द्रित विधियाँ हैं ...

• text-centerकेंद्र display:inlineतत्वों के लिए
• offset-*या केंद्र स्तंभ केmx-auto लिए इस्तेमाल किया जा सकता है ( )col-*
• या, justify-content-centerपर rowकरने के लिए केंद्र कॉलम ( col-*)
• mx-autodisplay:blockअंदर तत्वों को केंद्रित करने के लिएd-flex

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

बूटस्ट्रैप 4 सेंटिंग मेथड्स का डेमो

आपके मामले में, mx-autoकेंद्र में col-3और text-centerयह सामग्री के लिए केंद्र का उपयोग करें ..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

या,justify-content-center flexbox तत्वोंका उपयोग कर(.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

इसे भी देखें:
बूटस्ट्रैप 4 में वर्टिकल एलाइन सेंटर

Comments

धन्यवाद। जो भी मैं किसी भी उदाहरण या बूटस्ट्रैप डॉक्स में नहीं देखता हूं, वह अलग-अलग ब्रेकपॉइंट पर गैर-इनलाइन तत्वों का क्षैतिज केंद्र है। उदाहरण के लिए, <select>md और इसके बाद के संस्करण पर केंद्रित , लेकिन md के नीचे संरेखित करना छोड़ दिया।

— कायकिनकोडर

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं तो selectयह प्रदर्शित होता है: ब्लॉक, डिस्प्ले नहीं: इनलाइन क्योंकि form-controlडिस्प्ले: ब्लॉक। बेशक मूल प्रश्न उत्तरदायी ब्रेकप्वाइंट का उपयोग करने के बारे में नहीं था, ताकि उत्तर में समझाया न जाए।

— ज़ीम

Answer 2

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

कॉलम के लिए 'फ्लेक्स' को सक्षम करें जैसा हम चाहते हैं और औचित्य-सामग्री-केंद्र का उपयोग करें

Comments

यह एकमात्र समाधान है जिसने मेरे लिए काम किया। ओफ़्फ़! धन्यवाद;)

— अखिल

Answer 3

text-centerअपने कॉलम में क्लास जोड़ें :

<div class="col text-center">
I am centered
</div>

Answer 4

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

मैं का इस्तेमाल किया है justify-content-centerके बजाय वर्ग mx-autoमें के रूप में इस सवाल का जवाब ।

https://jsfiddle.net/sarfarazk/4fsp4ywh/ पर चेक करें

Comments

यह पहले से ही शीर्ष मतदान वाले उत्तर में शामिल है

— जीन-फ्रांकोइस कॉर्बेट

@ जीन-फ्रांस्वा कॉर्बेट मैंने एमएक्स-ऑटो के बजाय औचित्य-सामग्री-केंद्र वर्ग का उपयोग किया है। यह भी करने की एक विधि है। लोग इसका उपयोग कर सकते हैं मैं सिर्फ दूसरों की मदद करने की कोशिश कर रहा हूं। धन्यवाद

— सरफराज Kasmani

ठीक है। खैर, थोड़ा स्पष्टीकरण बहुत आगे बढ़ सकता है।

— जीन-फ्रांकोइस कॉर्बेट

Answer 5

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Answer 6

2020: इसी तरह का मुद्दा

यदि आपकी सामग्री उन बटनों का समूह है, जिन्हें आप किसी पृष्ठ पर केंद्रित करना चाहते हैं, तो उन्हें एक पंक्ति में लपेटें और औचित्य-सामग्री-केंद्र का उपयोग करें ।

नीचे नमूना कोड:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>