कॉलम में एक पाठ को लंबवत रूप से कैसे केंद्रित करें (बूटस्ट्रैप 4)?

Question

कॉलम में एक पाठ को लंबवत रूप से कैसे केंद्रित करें (बूटस्ट्रैप 4)? संरचना बुनियादी है, देखें:

<div class="row"> 
    <div class="col-md-6"> 
     <span>Text to center</span> 
    </div 
</div> 

Ty guys!

Answer 1

आप इसे प्राप्त करने के लिए my-auto कक्षा को पैरेंट <div class="col-md-6"> पर जोड़ सकते हैं। यह वर्ग y-axis पर स्वचालित मार्जिन सेट करता है, अधिक जानकारी के लिए ऊपर दिए गए लिंक को देखें।

यह इस तरह दिखेगा:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 my-auto"> 
 
     <span>Text to center</span> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <h1>Hello</h1> 
 
     <h1>Hello</h1> 
 
     <h1>Hello</h1> 
 
    </div> 
 
    </div> 
 
</div>

आप vertical alignment उपयोगिताओं का उपयोग करने के लिए परीक्षा हो सकती है लेकिन ये केवल इनलाइन, इनलाइन-ब्लॉक, इनलाइन तालिका, और तालिका सेल पर काम करेंगे तत्वों।

Answer 2

एक अन्य विकल्प .. flexbox उपयोगिताओं उपयोग करने के लिए है

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 align-self-center"> 
      <span>Text to center</span> 
     </div> 
     <div class="col-md-6"> 
      <p> 
      .. 
      </p> 
     </div> 
    </div> 
</div> 

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

इसके अलावा, वहाँ several other Bootstrap vertical centering options मेरे अन्य जवाब में विस्तार से बताया है।