Как элемент центра внутри контейнера, сохраняя их вертикально выровненными?

Question

Не совсем уверен, как правильно загладить это. Это лучше всего объяснить изображениями. Я стараюсь, чтобы элементы были центрированы, но когда на одной линии слишком много подходящих, новая строка должна быть выровнена с элементом выше, а не с центром в контейнере.

Я пытаюсь добиться этого:

Вместо этого:

Вот мой JSfiddle:

http://jsfiddle.net/6kwzy6La/

И мой HTML:

<div class="container2"> 
    <div class="content"> 

     <div id="box"> 
      <p> Some text goes here </p> 
     </div> 

     <div id="box"> 
      <p> Some text goes here </p> 
     </div> 

     <div id="box"> 
      <p> Some text goes here </p> 
     </div> 

     <div id="box"> 
      <p> Some text goes here </p> 
     </div> 

     <div id="box"> 
      <p> Some text goes here </p> 
     </div> 

    </div> 
</div> 

Answer 1

Один подход заключается в добавлении соответствующего правого поля до последнего ящика, если есть нечетное число коробок, как этот

#box:last-child:nth-child(2n + 1) { 
    margin-right:240px; 
} 

См http://jsfiddle.net/6kwzy6La/6/

Обратите внимание, что вы должны использовать class не id как id s должен быть уникальным в документе.

Answer 2

http://jsfiddle.net/6kwzy6La/

Container1 
{ 
text-align: center; 
} 

Container2 
{ 
text-align: left; 
}