Keep div horizontal zentriert

Question

Ich habe Bootstrap gut und in diesem gut gibt es ein Div mit Elementen namens "Eltern". Eltern schweben links miteinander. Wenn div groß genug ist, um 4 Eltern zu passen, passt es 4 Eltern in einer Reihe und andere in der zweiten und so weiter, wenn es groß genug ist, um drei zu passen, wird es drei in einer Reihe passen ... (Größe hängt von der Bildschirmbreite ab). Das Problem taucht auf, wenn div für 3 1/2 Eltern oder 4 und 20px oder so ähnlich groß ist. Dann wird der Platz links mit Rande gefüllt, wie Sie auf dem Bild sehen:

Wie kann ich halten div mit Eltern horizontal innerhalb Bootstrap zentrierten gut, so dass es nie ungleichmäßig Rand verteilt werden. Die Marge sollte auf der linken und rechten Seite immer gleich sein. Der Code ist hier (die klare div ignorieren, es hilft nur mit dem Schwimmer der Eltern, so dass die gut mit den Eltern erstreckt):

/* Some CSS to make the result easier to follow */ 
 
.parent { 
 
    background-color: white; 
 
    outline: 1px solid black; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="well" style="padding: 2em 0;"> 
 
    <div class="profile-exams"> 
 
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div> 
 
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div> 
 
    <div class="clear" style="clear: both;"></div> 
 
    </div> 
 
</div>

Das Problem ist, dass ich nicht statisch festlegen Breite von "Profil-Prüfungen", wie es variiert, wenn es 2, 3 oder 5 Kästen darin gibt. Aber wenn ich die Breite nicht definieren kann, würde sie nicht zentrieren.

Answer 1

Ich bin mir nicht sicher, ob dies ist, was Sie wollen, aber hier ist es:

.profile-exams { 
 
    text-align: center; 
 
} 
 
.parent { 
 
    text-align: left; 
 
/* These lines aren't necessary, but just to make the result easier to follow */ 
 
    background-color: white; 
 
    outline: 1px solid black; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="well" style="padding: 2em 0;"> 
 
    <div class="profile-exams"> 
 
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div> 
 
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div> 
 
    <div class="clear" style="clear: both;"></div> 
 
    </div> 
 
</div>

CodePen