एक फ्लोट संरेखित करना: केंद्र में बाईं div?

Question

मैं छवियों के एक समूह को पूरे पृष्ठ में क्षैतिज रूप से प्रदर्शित करना चाहता हूं। प्रत्येक छवि के नीचे कुछ लिंक होता है इसलिए मुझे प्रत्येक छवि / लिंक-समूह के चारों ओर एक कंटेनर लगाने की आवश्यकता होती है।

मैं जो चाहता हूं, उसके करीब पहुंच गया हूं, जो उन्हें फ्लोट: लेफ्ट में डाल रहा है। समस्या यह है कि मैं चाहता हूं कि कंटेनर केंद्र से बाहर न हों। इसे कैसे प्राप्त किया जा सकता है।

Answer 1

display:inline-block;फ्लोट के बजाय उपयोग करें

आप फ्लोट्स को केंद्र में नहीं रख सकते हैं, लेकिन इनलाइन-ब्लॉक सेंटर के रूप में अगर वे पाठ थे, तो आपके "पंक्ति" के बाहरी समग्र कंटेनर पर - आप तब सेट करेंगे text-align: center;प्रत्येक छवि / कैप्शन कंटेनर के लिए (यह जो होगा inline-block;) आप फिर से कर सकते हैं यदि आवश्यक हो तो पाठ को छोड़ दें

Comments

बस अगर कोई भी तत्वों के बीच दिखाई देने वाली जगहों से संघर्ष कर रहा है, तो अपने कोड में '<img> </ img> <img> </ img>' या '<img> जैसे तत्वों को परिभाषित करके अपने कोड में व्हाट्सएप को हटा दें। / img> <! - टिप्पणी -> <img> </ img> '।

— मार्टन

या माता-पिता तत्व सेट करें font-size:0और इसे बच्चे पर पुनर्स्थापित करें। या letter-spacing:-.31emमाता-पिता और letter-spacing:0बच्चे पर उपयोग करें ।

— माइक कॉसर

इसके बजाय @Bumr फ्लेक्सबॉक्स का उपयोग करें। नीचे एक उदाहरण है ।

— जनवरी Derk

vertical-align:middleउपयोग करते समय आपको जोड़ने की आवश्यकता हो सकती है display:inline-block।

— इबसेनव

Answer 2

सीएसएस फ्लेक्सबॉक्स इन दिनों अच्छी तरह से समर्थित है । Flexbox पर एक अच्छे ट्यूटोरियल के लिए यहां जाएं ।

यह सभी नए ब्राउज़रों में ठीक काम करता है:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

कुछ पूछ सकते हैं कि प्रदर्शन का उपयोग क्यों न करें: इनलाइन-ब्लॉक? साधारण चीजों के लिए यह ठीक है, लेकिन यदि आपको ब्लॉकों के भीतर जटिल कोड मिला है, तो लेआउट अब सही ढंग से केंद्रित नहीं हो सकता है। फ्लेक्सबॉक्स बाईं ओर तैरने की तुलना में अधिक स्थिर है।

Comments

यह क्षैतिज रूप से केंद्रित करने के लिए काम करता है। कैसे के बारे में खड़ी रूप में अच्छी तरह से केंद्रित?

— कुल्लू

केंद्र को लंबवत रूप से कंटेनर को ऊंचाई देने के लिए (जैसे ऊंचाई: 500px;) और संरेखित आइटम जोड़ें: केंद्र;

— Jan Derk

Answer 3

इसे इस तरह आज़माएं:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

Answer 4

बस एक में फ्लोट किए गए तत्वों को लपेटें <div>और इसे यह सीएसएस दें:

.wrapper {

display: table;
margin: auto;

}

Answer 5

शायद यह जो आप ढूंढ रहे हैं - https://www.w3schools.com/css/css3_flexbox.asp

सीएसएस:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

Answer 6

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}