가운데에서 간단한 가로 정렬을 시도합니다.

Question

상자에 4 개의 가로 div가 표시되지만 정렬되지 않았습니다. 4, 5, 6 또는 7 개의 작은 상자를 수평으로 추가하고 싶습니다. 어떻게 처리합니까? 이것은 아래 HTML과 CSS 코드입니다. 첫 번째 3 개는 좋지만 다른 것들을 추가하면 다른 위치에두기 만합니다.

이것은 내 링크입니다. 나는이 생각 하단

http://codepen.io/willc86/pen/hpFLe

#box2{ 
    border: 3px solid green; 
    margin: 40px; 
    text-align: center; 
} 

#left1{ 
    border: 1px solid green; float: left; margin-left: 30px; 
} 


#right1{ 
border: 1px solid red; float: right; margin-right: 30px; 
} 

#middle1{ 
border: 1px solid tan; margin: auto; width: 50px; 

} 

#middlerightbox{ 
border: 1px solid blue; margin: auto; width: 50px; 

} 




     <div id="box2"> 
     <div id="margin"> 
      <div id="left1"> 
       hello 
      </div> 

      <div id="right1"> 
       hello 
      </div> 

      <div id="middle1"> 
       hello 
      </div> 

      <div id="middlerightbox"> 
       hello 
      </div> 

     <div class="clear"> 
     </div> 
     </div> 

Answer 1

에서 그 사람의 모든 방법은 당신이 원하는 것입니다 : 필요한 경우

#box2 { 
border: 3px solid green; 
margin: 40px; 
height: 20px; // necessary! 
text-align: center; 
} 

#left1 { 
border: 1px solid green; float: left; 
} 


#right1 { 
border: 1px solid red; float: left; 
} 

#middle1 { 
border: 1px solid tan; float: left; margin: auto; 
} 

#middlerightbox { 
border: 1px solid blue; float: left; margin: auto; 
} 

<div id="box2"> 
<div id="margin"> 
<div id="left1">hello</div> 
<div id="right1">hello</div> 
<div id="middle1">hello</div> 

<div id="middlerightbox">hello</div> 

<div class="clear"> </div> 
</div> 

더 도움을 요청!