CSS - выравнивание завернутых плавающих divs в центр

Question

Я пытаюсь создать что-то вроде галереи, которая показывает различное количество изображений в строке на основе ширины браузера. Это уже достигнуто с использованием overflow: hidden во внешнем div и float: left во внутреннем div.

Однако, что происходит с этим, так это то, что мои изображения всегда выровнены влево, оставляя много пробелов справа. Как сделать так, чтобы галерея всегда была сосредоточена на экране независимо от того, сколько изображений в каждой строке.

Мой код на http://codepen.io/anon/pen/KzqAs

Большое спасибо. :)

Answer 1

Как об этом: http://codepen.io/anon/full/mtBbF

HTML

<div class="container"> 
    <div class="red box">red</div> 
    <div class="blue box">blue</div> 
    <div class="black box">black</div> 
</div> 

CSS

body{ 
    text-align:center; /*You would need to define this in a parent of .container*/ 
} 
.container{ 
    display: inline-block; 
    margin: 0 auto; 
    text-align: left; 
} 
.box { 
    width: 300px; 
    height: 300px; 
    float: left; 
} 

Answer 2

Demonstration

Вам нужно использовать идентификатор (или класс) в главном div. Set width: 300+px and margin: auto Также ваши коробки должны быть с display: inline-block, чтобы они могли начать «inline» Я немного изменил цвета ящиков для лучшей видимости.