बूटस्ट्रैप के साथ एक छवि मृत केंद्र कैसे संरेखित करें

Question

मैं बूटस्ट्रैप ढांचे का उपयोग कर रहा हूं और सफलता के बिना एक छवि को क्षैतिज रूप से केंद्रित करने की कोशिश कर रहा हूं।

मैंने विभिन्न तकनीकों की कोशिश की है जैसे 12 ग्रिड सिस्टम को 3 बराबर ब्लॉकों में विभाजित करना जैसे

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

पृष्ठ के सापेक्ष एक छवि प्राप्त करने के लिए सबसे आसान तरीका क्या है?

Comments

और बी.टी.वी. आप "ऑफ़सेटिंग कॉलम" -section पर एक नज़र रखना चाहते हैं। twitter.github.com/bootstrap/scaffolding.html#gridSystem

— mind85

किसी ने इसे एक उत्तर के रूप में चिह्नित किया है, और मैं सहमत हूं। कृपया इसे टिप्पणी के रूप में जोड़ें, और आपका उत्तर शीघ्र ही हटा दिया जाएगा।

— tckmn

यदि आपके पास img-responsiveअपने imgटैग पर कक्षा है , तो छवि केंद्र में नहीं हो सकती है। बूटस्ट्रैपक्लासका उपयोग करने के बारे में स्पष्टीकरण के लिए यह SO उत्तर देखेंcenter-blockकि बूटस्ट्रैप तरीका उस समस्या को हल करेगा।

— cssyphus

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप यह कर सकते हैं: stackoverflow.com/a/59469712/4654957

— डिएगो वेन्केशियो

Answer 1

ट्विटर बूटस्ट्रैप v3.0.3 में एक वर्ग है: केंद्र-ब्लॉक

केंद्र सामग्री ब्लॉक

प्रदर्शित करने के लिए एक तत्व सेट करें: मार्जिन के माध्यम से ब्लॉक और केंद्र। एक मिश्रण और कक्षा के रूप में उपलब्ध है।

बस टैग .center-blockमें एक वर्ग जोड़ने की जरूरत imgहै, इस तरह दिखता है

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

बूटस्ट्रैप में पहले से ही css स्टाइल कॉल .center-block है

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

आप यहां से एक नमूना देख सकते हैं

Comments

div </div>पर समापन टैग containerगायब दिखता है। यह मेरे लिए v3.3.7 पर काम नहीं करता है

— ताराबाई

Answer 2

ऐसा करने का सही तरीका है

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

Comments

इस पर उपयोग करते समय यह मेरे लिए काम नहीं किया - startbootstrap.com/round-about .. लेकिन काम center-blockकरने वाले <img>तत्वों के लिए एक वर्ग जोड़कर ..

— सुमीत

पाठ-केंद्र img- उत्तरदायी वर्ग के साथ छवियों पर काम नहीं करेगा लेकिन ऊपर टिप्पणी (केंद्र-ब्लॉक के बारे में) इस समस्या को हल करती है

— ट्रोजन

एक अवलोकन: बूटस्ट्रैप v3.1.0 में कॉलम में टेक्स्ट-सेंटर जोड़कर कॉलम में img-responsive को केंद्र में रखना संभव है। यह व्यवहार v3.3.4 में टूट गया है। बहुत कष्टप्रद। सीएसएस चूसता है।

— f470071

आप डॉक्स में केंद्र-ब्लॉक का उपयोग करें, जैसा कि डॉक्स में कहा गया है: getbootstrap.com/css/#images-responsive

— Nacho

Answer 3

अपडेट 2018

center-blockवर्ग नहीं रह गया है में मौजूद है बूटस्ट्रैप 4 । बूटस्ट्रैप 4 में एक छवि को केंद्रित करने के लिए, उपयोग करें mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Comments

बस 'अपडेट 2018' में थोड़ा स्पष्टीकरण जोड़ने के लिए: एमएक्स-ऑटो बाएं और दाएं मार्जिन को ऑटो पर सेट करता है; डी-ब्लॉक सेट डिस्प्ले: ब्लॉक

— माइकल मोरियार्टी

Answer 4

वर्ग के रूप में छवि के लिए 'केंद्र-ब्लॉक' जोड़ें - कोई अतिरिक्त सीएसएस की आवश्यकता नहीं है

<img src="images/default.jpg" class="center-block img-responsive"/>

Comments

यकीन नहीं क्यों -1 - इस सबसे अच्छे उत्तर से है! यह बूटस्ट्रैप में हेल्पर क्लास बिल्ड का उपयोग करता है।

— user2562923

बूटस्ट्रैप 4 में, mx-autoइसके बजाय का उपयोग करेंcenter-block

— क्वांटम

Answer 5

Twitter बूटस्ट्रैप में एक वर्ग होता है जो केंद्र: .pagination- केंद्रित होता है

इसने मेरे लिए काम किया:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

वर्ग के लिए सीएसएस है:

.pagination-centered {
  text-align: center;
}

Comments

या शायद .text-centerकक्षा?

— trejder

Answer 6

आप निम्नलिखित का उपयोग कर सकते हैं। यह ऊपर बूटस्ट्रैप 3.x का समर्थन करता है।

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

Comments

इसके लिए धन्यवाद। बस आज मुझे क्या चाहिए।

— रयान विल्सन

Answer 7

यह मानते हुए कि छवि के साथ और कुछ नहीं है, माता-पिता text-align: centerमें उपयोग करने का सबसे अच्छा तरीका है img:

.row .span4 {
    text-align: center;
}

संपादित करें

जैसा कि अन्य उत्तरों में बताया गया है, आप बूटस्ट्रैप CSS क्लास .text-centerको मूल तत्व में जोड़ सकते हैं । यह बिल्कुल वैसा ही काम करता है और v2.3.3 और v3 दोनों में उपलब्ध है

Comments

बिल्कुल सही - यह काम करता है। लेकिन कहते हैं कि मेरे पास छवि के नीचे <ul> तत्व है ... यह अपेक्षा के अनुरूप केंद्र संरेखित नहीं करता है, क्या मैं कुछ भी जोड़ सकता हूं? साभार

— फिक्सर

चूंकि ट्विटर बूटस्ट्रैप में मुख्य वर्गों में से एक में डूबो। मैं इस पृष्ठ twitter.github.com/bootstrap/index.html पर एक नए वर्ग को परिभाषित करने की सलाह दूंगा।

— बपतिस्मा

@Fixer <ul>को अभी भी केंद्र को संरेखित करना चाहिए: jsfiddle.net/N74N7/1 इसे प्रभावित करने वाले अन्य सीएसएस कोड होने चाहिए

— मेरा सिर

2 या 3 घंटे से अधिक का समय और केवल यह लाइन ... धन्यवाद!

— १

Answer 8

मेरे लिये कार्य करता है। प्रयोग करके देखेंcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Answer 9

मुझे वही चाहिए और यहाँ मुझे समाधान मिला:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

और सीएसएस को:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Comments

मुझे लगता है कि बूटस्ट्रैप लोगों को इसे अपने सीएसएस में जोड़ने की आवश्यकता है

— मुहम्मद अहसन

हाय, और धन्यवाद! मैं अब बूटस्ट्रैप v3 का उपयोग कर रहा हूं। मैंने इसे अपने img कंटेनर div में जोड़ा, इसलिए मुझे चीजों को काम करने के लिए अपनी div के लिए सटीक चौड़ाई (कम से कम) निर्दिष्ट करनी पड़ी। यदि आपके पास कोई कंटेनर या भिन्न छवि आकार नहीं है, तो इस वर्ग को अपनी छवि में जोड़ें।

— इनन

Answer 10

आप बूटस्ट्रैप img क्लास के साथ मार्जिन प्रॉपर्टी का उपयोग कर सकते हैं।

.name-of-class .img-responsive { margin: 0 auto; }

Answer 11

लगता है कि ब्राउज़र संस्करण कोई समस्या नहीं है, तो हम एक नई HTML5 सुविधा का उपयोग कर सकते हैं:

HTML फ़ाइलों में:

<div class="centerBloc">
  I will be in the center
</div>

और CSS फ़ाइल में, हम लिखते हैं:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

और इसलिए div ब्राउज़र में पूरी तरह से केंद्र हो सकता है।

Comments

आपके डिव की क्लास को .centerBloc कहा जाता है और आपके css फ़ाइल शो की बॉडी को लोड किया जा रहा है। लोड हो रहा है ...

— Martin

अब ठीक है @ मर्टिन

— dtechplus 1

Answer 12

आपको उपयोग करना चाहिए

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

Answer 13

मैं justify-content-centerएक कंटेनर के भीतर एक पंक्ति में कक्षा का उपयोग कर रहा हूं । बूटस्ट्रैप 4 के साथ अच्छी तरह से काम करता है।

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Answer 14

मैंने इसे बनाया और Site.css में जोड़ा।

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Answer 15

आप पिछले समाधान के सीएसएस को नीचे के रूप में बदल सकते हैं:

.container, .row { text-align: center; }

यह माता-पिता के सभी तत्वों को भी केंद्र में रखना चाहिए div।