요소를 세로로 정렬 된 상태로 컨테이너 내에 가운데에 배치하려면 어떻게합니까?

Question

제대로 제목을 지정하는 방법을 잘 모르겠습니다. 이미지로 설명하는 것이 가장 좋습니다. 항목을 가운데 맞춤으로 유지하려하지만 너무 많아 한 줄에 제대로 들어 가지 않으면 새 줄이 그 위의 항목과 정렬되고 컨테이너의 가운데에 정렬되지 않아야합니다. 대신이의

: :이 달성하기 위해 노력하고

http://jsfiddle.net/6kwzy6La/

그리고 내 HTML :

여기

내 JSfiddle입니다

<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

한 가지 방법은 상자의 홀수가있는 경우 class을하지 사용해야 http://jsfiddle.net/6kwzy6La/6/

참고를 참조하십시오이

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

처럼, 마지막 상자에 적절한 오른쪽 여백을 추가하는 것입니다 id은 id으로 문서 내에서 고유해야합니다.

Answer 2

http://jsfiddle.net/6kwzy6La/

Container1 
{ 
text-align: center; 
} 

Container2 
{ 
text-align: left; 
}