उत्तरदायी छवि संरेखित केंद्र बूटस्ट्रैप 3

Question

मैं बूटस्ट्रैप 3 का उपयोग करते हुए एक कैटलॉग करता हूं। जब टैबलेट पर प्रदर्शित किया जाता है, तो उत्पाद की छवियां उनके छोटे आकार (500x500) और ब्राउज़र में 767 पिक्सल की चौड़ाई के कारण बदसूरत दिखती हैं। मैं छवि को स्क्रीन के केंद्र में रखना चाहता हूं, लेकिन किसी कारण से मैं नहीं कर सकता। समस्या को हल करने में कौन मदद करेगा?

Comments

मुझे आपकी साइट और उत्पादों का डिज़ाइन पसंद है - अच्छा काम:)

— Bojangles

"हमें शरीर में स्थान कोड की आवश्यकता क्यों है" का एक और उदाहरण है।

— LEQADA

Answer 1

यदि आप बूटस्ट्रैप v3.0.1 या अधिक का उपयोग कर रहे हैं, तो आपको इसके बजाय इस समाधान का उपयोग करना चाहिए । यह कस्टम CSS के साथ बूटस्ट्रैप की शैलियों को ओवरराइड नहीं करता है, बल्कि बूटस्ट्रैप सुविधा का उपयोग करता है।

मेरा मूल उत्तर पोस्टरिटी के लिए नीचे दिखाया गया है

---

यह एक सुखद आसान फिक्स है। क्योंकि .img-responsiveबूटस्ट्रैप पहले से ही सेट है display: block, आप margin: 0 autoछवि को केंद्रित करने के लिए उपयोग कर सकते हैं :

.product .img-responsive {
    margin: 0 auto;
}

Comments

शायद margin: 0 auto.img- उत्तरदायी के बजाय एक नया वर्ग बनाना बेहतर है ।

— 21

यह एक सोच है, हालांकि व्यक्तिगत रूप से मैं कहीं भी नहीं सोच सकता हूं कि मैं एक उत्तरदायी छवि नहीं चाहता हूं, खासकर इस डिजाइन के साथ। यह सब उपयोग के मामले पर निर्भर करता है, और भविष्य में क्या होने जा रहा है

— Bojangles

कृपया इस उत्तर को देखें यदि आप बूटस्ट्रैप v4 या उच्चतर का उपयोग कर रहे हैं: stackoverflow.com/a/43293957/4102515

— snorberhuis

Answer 2

नहीं है .center-blockट्विटर में वर्ग बूटस्ट्रैप 3 ( v3.0.1 के बाद से ), इसलिए उपयोग करें:

<img src="..." alt="..." class="img-responsive center-block" />

Comments

यह स्वीकृत उत्तर होना चाहिए, क्योंकि आपको इसका उपयोग करने के लिए किसी भी सीएसएस को जोड़ने की आवश्यकता नहीं है।

— user2602152

class="img-responsive" style="margin: 0 auto;"मेरे लिए class="img-responsive center-block"काम नहीं करता (बूटस्ट्रैप 3, लेकिन कुछ महीने पुराना एक संस्करण)

— एमएक्सआरओ

जब img- उत्तरदायी का उपयोग किया जाता है तो संरेखित केंद्र काम नहीं करता है।

— इस्माइल

@DHlavaty आप .img- उत्तरदायी और .center- ब्लॉक का उपयोग करने के बीच के अंतर को समझा सकते हैं और स्वीकार किए गए उत्तर जैसे ऑटो मार्जिन के साथ .img- उत्तरदायी का उपयोग कर सकते हैं? क्या एक विधि अधिक मजबूत है?

— user137717

यदि आपकी छवि क्लिक करने योग्य मानी जाती है, तो आप इसका उपयोग नहीं करना चाहेंगे। यही है, अगर यह एक <a href="#"> </a>जोड़ी के अंदर लपेटा जाता है, तो क्लिक करने योग्य क्षेत्र पूरी तरह से संलग्न कंटेनर की पूरी चौड़ाई में विस्तारित हो जाएगा जो आपकी छवि से काफी बड़ा हो सकता है। यह उन उपयोगकर्ताओं को भ्रमित कर सकता है जो यह सोचते हैं कि वे "खाली" स्थान पर हैं।

— CXJ

Answer 3

center-blockछवि में केवल वर्ग जोड़ें , यह बूटस्ट्रैप 4 के साथ भी काम करता है:

<img src="..." alt="..." class="center-block" />

नोट: उपयोग center-blockकिए जाने पर भी काम करता img-responsiveहै

Comments

सर्वश्रेष्ठ प्रतिक्रिया, लेकिन कम आंका गया। इसलिए आप एक रूपरेखा का उपयोग करें!

— Baumannzone

इसलिए। बहुत खुबस। धन्यवाद

— AndrewLeonardi

इसका कार्य..धन्यवाद

— धीरेन पटेल

Answer 4

.text-centerयदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं तो बस क्लास का उपयोग करें ।

<div class="text-center">
    <img src="..." alt="..."/>
</div>

नोट: यह img-responsive के साथ काम नहीं करता है

Comments

सवाल के बारे में हैimg-responsive

— एलेक्सी कोसोव

— Img-

Answer 5

यह छवि को केंद्र में रखना चाहिए और इसे उत्तरदायी बनाना चाहिए।

<img src="..." class="img-responsive" style="margin:0 auto;"/>

Answer 6

मैं एक और "अमूर्त" वर्गीकरण का सुझाव दूंगा। एक नया वर्ग "img-center" जोड़ें जिसका उपयोग .img- उत्तरदायी वर्ग के साथ किया जा सकता है:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

Answer 7

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

Comments

क्यों display: table? यह पहले से ही काम display: blockकरने के लिए पर्याप्त हैmargin: 0 auto

— Bojangles

Answer 8

आप img-responsiveइस शैली वर्ग के साथ अन्य छवियों को प्रभावित किए बिना अभी भी काम कर सकते हैं ।

आप इस टैग को पूर्व आईडी / div आईडी / वर्ग के साथ एक आदेश को परिभाषित कर सकते हैं जिसके भीतर यह imgनेस्टेड है। यह रिवाज img-responsiveउस क्षेत्र में ही काम करेगा।

मान लीजिए कि आपके पास एक HTML क्षेत्र है जिसे निम्न रूप में परिभाषित किया गया है:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

फिर, आपका CSS हो सकता है:

section#work .img-responsive{
    margin: 0 auto;
}

नोट: यह उत्तर img-responsiveएक पूरे के रूप में परिवर्तन के संभावित प्रभाव के संबंध में है । बेशक, center-blockसबसे सरल उपाय है।

Comments

इस उत्तर की सराहना की जा रही है, जब छवि के नीचे एक पाठ होता है तो छवि को केंद्र में रखते हुए पंक्ति वर्ग में लपेटना महत्वपूर्ण होता है।

— ग्लेन प्लास

Answer 9

इस कोड को आज़माएं यह छोटे आइकनों के लिए भी बूटस्ट्रैप 4 के साथ काम करेगा क्योंकि कोई केंद्र-ब्लॉक वर्ग नहीं है बूटस्ट्रैप 4 इसलिए इस विधि को आज़माएं यह मददगार होगा। आप की स्थापना करके छवि की स्थिति को बदल सकते हैं .col-md-12करने के लिए .col-md-8या .col-md-4, यह आप तक है।

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

Answer 10

इसे इस्तेमाल करे:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

Answer 11

बस सभी चित्र थंबनेल को पंक्ति / कॉल विभाजन के अंदर रखें:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

और सब कुछ ठीक चलेगा!

Answer 12

पहले से दिए गए उत्तरों को जोड़ने के लिए, img-responsiveसंयोजन के साथ img-thumbnailसेट display: blockकरना होगा display: inline block।

Answer 13

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

।

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

Answer 14

आप इसे परिभाषित मार्जिन के साथ ठीक कर सकते हैं: 0 ऑटो

या आप col-md- ऑफसेट का भी उपयोग कर सकते हैं

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>

Answer 15

मानक कक्षाओं का उपयोग करके सभी Booostrap ऑब्जेक्ट्स पर लागू होने वाला अधिक सटीक तरीका केवल शीर्ष और निचला मार्जिन सेट नहीं करना होगा (जैसा कि छवि इन माता-पिता से इनहेरिट कर सकती है), इसलिए मैं हमेशा उपयोग कर रहा हूं:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

मैंने इसके लिए एक Gist भी बनाया है, इसलिए यदि किसी बग के कारण कोई परिवर्तन लागू होगा, तो अपडेट संस्करण हमेशा यहां रहेगा: https://gist.github.com/jdrda/09a38bf152dd6a8aff415158679cc66

Answer 16

अब तक स्वीकार करने का सबसे अच्छा समाधान लगता है <img class="center-block" ... />। लेकिन किसी ने उल्लेख नहीं किया कि कैसे center-blockकाम करता है।

उदाहरण के लिए बूटस्ट्रैप v3.3.6 लें:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

का डिफ़ॉल्ट मान dispalyके लिए <img>है inline। मान blockएक तत्व को ब्लॉक तत्व (जैसे <p>) के रूप में प्रदर्शित करेगा । यह एक नई लाइन पर शुरू होता है, और पूरी चौड़ाई लेता है। इस तरह, दो मार्जिन सेटिंग्स छवि को मध्य में क्षैतिज रूप से रहने देती हैं।