Center ausrichten mehrere Kind DIV

Question

Ich finde es etwas verwirrend um dieses Problem zu arbeiten.

Ich habe Eltern DIV und 3/mehr Kind DIV.

Parent DIV ist in der Mitte ausgerichtet und Kind DIV sollte links schweben, sollte aber in der Mitte ausgerichtet sein.

CSS enthält,

.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

Wenn Sie Ihre Elemente horizontal ausrichten möchten, schweben Sie sie nicht.

die Art und Weise sie zu inline-block angezeigt werden, und richten Sie sie in der Mitte durch den text-align Stil ihrer Eltern zu ändern:

#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>

Seien Sie sicher, dass kein Leerraum oder Zeilenumbrüche haben zwischen Ihren Kindern <div> s (in Ihrem HTML, das ist) oder es auskommentieren. Nun, da diese Inline Elemente sind, wird dieser Leerraum als Leerzeichen interpretiert.

Answer 2

Automatische Ränder nicht auf ein Element anzuwenden, die einen Schwimmer angewendet wurde. Das Entfernen des Floats sollte Ihnen den Anfang machen ...