केंद्र कई बच्चे को डीआईवी

Question

संरेखित करता है मुझे इस समस्या के आसपास काम करने में थोड़ा भ्रमित लगता है।

मेरे पास मूल डीआईवी और 3/अधिक बाल डीआईवी है।

अभिभावक डीआईवी केंद्र गठबंधन है और बाल डीआईवी तैरने वाला होना चाहिए लेकिन केंद्र को गठबंधन किया जाना चाहिए।

सीएसएस होता है,

.center { 
    float:left; 
    height:250px; 
    width:15%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

I have a sample of the code link here...

Answer 1

यदि आप क्षैतिज रूप से अपने तत्वों को केंद्रीय रूप से संरेखित करना चाहते हैं, तो उन्हें फ़्लोट न करें।

तरह वे inline-block करने को बदलना और अपने माता पिता की text-align शैली बदलकर केंद्र में उन्हें संरेखित:

#parent { 
 
    text-align:center; 
 
    height:450px; 
 
    width:75%; 
 
    border:1px solid blue; 
 
} 
 
.center { 
 
    display:inline-block; 
 
    height:250px; 
 
    width:15%; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}

<div id="parent"> 
 
    <div id="child1" class="center"></div><!-- 
 
--><div id="child2" class="center"></div><!-- 
 
--><div id="child3" class="center"></div> 
 
</div>

कोई सफेद-अंतरिक्ष या नई-पंक्तियों के लिए सुनिश्चित करें आपके बच्चों के बीच <div> एस (आपके एचटीएमएल में, या है) या टिप्पणी करें। अब ये इनलाइन तत्व हैं, इस श्वेत-स्थान को अंतरिक्ष के रूप में व्याख्या किया जाएगा।

Answer 2

स्वत: मार्जिन एक तत्व जो एक नाव लागू किया है पर लागू नहीं होगा। फ्लोट को हटाने से आपको शुरू होना चाहिए ...