मैं बूटस्ट्रैप v4-alpha में एक छवि को कैसे केंद्रित कर सकता हूं?

Question

बूटस्ट्रैप के लिए नया और मैंने v4 सीखना शुरू कर दिया। मैं केवल बूटस्ट्रैप के सीएसएस-वर्गों का उपयोग करके एक साधारण छवि को केन्द्रित करने के लिए संघर्ष कर रहा हूं।

मैंने पहले से ही कई चीजों की कोशिश की है। एक बूटस्ट्रैप सीएसएस-क्लास mx-auto को img तत्व में जोड़ रहा था, जो कुछ भी नहीं करता है।

सहायता की सराहना की जाती है।

<div class="container"> 
    <div class="row"> 
     <div class="col-4 mx-auto"> 
      <img class=""...> <!-- center this image within the column --> 

      <form...> 

      <p...> 
      <p...> 
      <p...>     
     </div> 
    </div> 
</div> 

Answer 1

छवि डिफ़ॉल्ट रूप से इनलाइन ब्लॉक के रूप में प्रदर्शित किया जाता है, आप .mx-auto के साथ केंद्र के लिए में ब्लॉक के रूप में यह प्रदर्शित करने के लिए की जरूरत है। इस के साथ किया जा सकता है में निर्मित .d-block:

<div class="container"> 
    <div class="row"> 
     <div class="col-4"> 
      <img class="mx-auto d-block" src="..."> 
     </div> 
    </div> 
</div> 

या इनलाइन-ब्लॉक के रूप में छोड़ और .text-center साथ एक div में लपेटा:

<div class="container"> 
    <div class="row"> 
     <div class="col-4"> 
      <div class="text-center"> 
      <img src="..."> 
      </div>  
     </div> 
    </div> 
</div> 

मैं दोनों तरीकों से दिखा एक fiddle बनाया है। वे here दस्तावेज भी हैं।

Answer 2

चूंकि आईएमजी एक इनलाइन तत्व है, बस इसके कंटेनर पर text-center का उपयोग करें। mx-auto का उपयोग कंटेनर (कॉलम) को भी केंद्रित करेगा। d-block साथ ब्लॉक, और फिर mx-auto काम करेगा:

<div class="row"> 
    <div class="col-4 mx-auto text-center"> 
     <img src=".."> 
    </div> 
</div> 

आप केवल केंद्र छवि (और नहीं अन्य स्तंभ सामग्री) चाहते हैं, छवि प्रदर्शन करते हैं।

<div class="row"> 
    <div class="col-4"> 
    <img class="mx-auto d-block" src=".."> 
    </div> 
</div> 

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