Wie zentriere ich linksbündige Elemente?

Question

Ich habe einen Behälter von verschiedener Breite, und verschiedene Anzahl von Boxen schweben darin. Alle Boxen haben die gleichen width und height.

Dies ist eine Demonstration. https://jsfiddle.net/kghvmjb6/1/

Ich suche nach reiner CSS-Lösung, wenn möglich. Ansonsten sind reines javascript (keine jQuery) und CSS-Lösungen in Ordnung.

Dieses Beispiel funktioniert gut mit einer Reihe von Floating-Boxen, aber scheitern mit mehreren Zeilen, was nicht ich will. https://codepen.io/alexandredees/pen/ojaFr

Answer 1

Statt float der Verwendung left verwenden displayinline-block und in der Mutter div hinzufügen text-aligncenter, dass die Boxen in der container

Modified Fiddle

HTML

<div class="container"> 
<div class=""> 
    <div class="box">1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 
    <div class="box">4</div> 
    <div class="box">5</div> 
    <div class="box">6</div> 
    <div class="clear"></div> 
</div> 
</div> 

CSS

Zentrum wird

.container { 
    border: 1px solid red; 
    width: 480px; text-align:center; 
} 

    .container.wider { 
    width: 530px; 
    } 

.box { 
    float: none; 
    width: 80px; 
    height: 80px; 
    margin: 10px; 
    background-color: #ddd; 
    display:inline-block; 
    }