एक कंटेनर में फ़्लोटेड डिव्स सेंटर कैसे करें

Question

क्या एक कंटेनर में फ़्लोटेड divs को केंद्र करना संभव है और यदि ऐसा है तो कैसे?

उदाहरण के लिए मेरे पास एक कंटेनर div वाला एक पृष्ठ है जिसमें बहुत से परिवर्तनीय आकार (गतिशील रूप से जेनरेट किए गए) फ्लोट किए गए (बाएं) divs हैं। Divs अगली पंक्ति पर बहती है लेकिन वे कंटेनर div में केंद्रित नहीं हैं, बजाय बाईं ओर पंक्तिबद्ध हैं। यह इस तरह दिखता है:

---------------------------- 
-       - 
- +++ +++++ ++++ ++  - 
- +++ +++++ ++++ ++  - 
-       - 
- ++ ++++++ +++ +  - 
- ++ ++++++ +++ +  - 
-       - 
---------------------------- 

जबकि मैं इस तरह कंटेनर में केंद्रित जारी divs चाहते हैं:

---------------------------- 
-       - 
- +++ +++++ ++++ ++ - 
- +++ +++++ ++++ ++ - 
-       - 
- ++ ++++++ +++ + - 
- ++ ++++++ +++ + - 
-       - 
---------------------------- 

धन्यवाद,

DLiKS

Answer 1

यह संभव है। स्रोत के रूप में http://www.pmob.co.uk/pob/centred-float.htm और http://css-discuss.incutio.com/wiki/Centering_Block_Element का उपयोग करना।

यहाँ एक बेला अवधारणा का प्रदर्शन कर रहा है, नीचे से HTML और सीएसएस का उपयोग कर:

#outer { 
    float: right; 
    position: relative; 
    left: -50%; 
} 

#inner { 
    position: relative; 
    left: 50%; 
} 

#inner > li { 
    float: left; 
} 

स्पष्टीकरण::

https://jsfiddle.net/t9qw8m5x/

<div id="outer"> 
    <ul id="inner"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 2 with long text</a></li> 
     <li><a href="#">Button 3</a></li> 
    </ul> 
</div> 

इस आशय के लिए आवश्यक न्यूनतम सीएसएस है

बस li { float: left; } नियम के साथ शुरू करें। फिर उन फ्लोट्स को left: 50%; relative position में लपेटें, इसलिए <ul> का बॉक्स बाएं किनारे पृष्ठ के क्षैतिज केंद्र में है, फिर #outer में नियमों का सही ढंग से समायोजित करने के लिए नियमों का उपयोग करें ताकि #inner का केंद्र पृष्ठ के साथ गठबंधन हो।

Answer 2

केंद्र "div" तत्व के लिए एक अच्छी चाल "मार्जिन: ऑटो" सेट करना है, यह उन्हें केंद्रित करेगा। ऑटो:

Answer 3

<div id='contain'><center><div id='content'>qwerty</div></center></div> 

या

<div id='contain'><div id='content'>qwerty</div></div> 

<style type='text/css'> 

#content { 

    width:200px; 

    height:200px; 

    margin:auto; 
    /* margin:auto; requires width and i think height to be defined in nearly all browsers */ 

    }</style> 

Answer 4

स्क्रीन स्थान चौड़ाई कि इच्छित लेआउट तो कब्जा माता पिता एक ही चौड़ाई बनाने के लिए और लागू मार्जिन होगा की कुल राशि की गणना।

.outer { 
 
    /* floats + margins + borders = 270 */ 
 
    max-width: 270px; 
 
    margin: auto; 
 
    height: 80px; 
 
    border: 1px; 
 
    border-style: solid; 
 
} 
 

 
.myFloat { 
 
    /* 3 floats x 50px = 150px */ 
 
    width: 50px; 
 
    /* 6 margins x 10px = 60px */ 
 
    margin: 10px; 
 
    /* 6 borders x 10px = 60px */ 
 
    border: 10px solid #6B6B6B; 
 
    float: left; 
 
    text-align: center; 
 
    height: 40px; 
 
}

<div class="outer"> 
 
    <div class="myFloat">Float 1</div> 
 
    <div class="myFloat">Float 2</div> 
 
    <div class="myFloat">Float 3</div> 
 
</div>