केंद्र बूटस्ट्रैप में एक स्तंभ के अंदर सामग्री 4

Question

मैं इस समस्या को ठीक करने के लिए मदद चाहिए, मैं bootstrap4 में स्तंभ के अंदर सामग्री केंद्र के लिए की जरूरत है, नीचे

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

Answer 1

मेरी कोड प्राप्त करें, जोड़े से किसी भी वर्ग ऑफसेट ऑफसेट -1 ऑफसेट -11, जो कभी भी इसे केंद्र बनाता है।

<div class="col-3 offset-5"> 

    <div class="nauk-info-connections text-center" style="border: 1px red solid"> 
    Text here2 
    <span>span text </span> 
</div> 

बूटस्ट्रैप 4. का उपयोग कर बेला मैं इस्तेमाल किया "ऑफसेट-5" में fiddle की जाँच करें, तो यह केंद्र रखा गया है।

Answer 2

कई बूटस्ट्रैप 4 में क्षैतिज केंद्रित तरीकों रहे हैं ...

• केंद्र के लिए text-centerdisplay:inline तत्वों
• mx-autodisplay:block तत्वों
• offset-* या mx-auto केंद्रित के लिए केंद्र ग्रिड col-* किया जा सकता है
• justify-content-center केंद्र 01 परrow अंदर

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

Demo of the Bootstrap 4 Centering Methods

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

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

http://www.codeply.com/go/GRUfnxl3Ol

यह भी देखें:
Vertical Align Center in Bootstrap 4

Answer 3

अपने कॉलम में text-center श्रेणी जोड़ें:

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