Zentriere divs in der Mitte und verschiebe die neue Zeile div nach links - html, css, css-position, relativelayout

Ich habe eine feste Größeneinteilung in einem Container. Ich möchte, dass sie relativ zum Container zentriert sind, aber wenn es in der nächsten Zeile eine Unterteilung gibt, sollte die Position von links beginnen (siehe Beispiel).

Wie Sie sehen, wird das, was ich jetzt habe, oben im Bild angezeigt. Alle Unterteilungen sind in der Mitte des Containers ausgerichtet. Beachten Sie jedoch die Unterteilungen in der zweiten Zeile - dort, wo sie ihre Position beginnen.

Der gewünschte Effekt wird im zweiten Beispiel des Bildes angezeigt. Wie kann ich das mit CSS erreichen?

HTML:

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

CSS:

.container {
text-align:center;
}

.child {
position:relative;
display:inline-block;
width: 500px;
height: 200px;
}

Antworten:

Fügen Sie float hinzu: links in der Kinderklasse wie folgt DEMO

CSS:

.child {
position:relative;
display:inline-block;
width: 500px;
height: 200px;
float:left;
}