컨테이너를 가로로 정렬 하시겠습니까? (가장 쉬운 방법은?) CSS

Question

용기를 수평으로 정렬하는 가장 좋은 방법은 무엇입니까? 예를 들어, 기본적으로 3 개의 박스/컨테이너를 웹 페이지 중앙에 가로로 나란히 놓기를 원합니다.

Answer 1

HTML :

<div class="float"></div> 
<div class="float"></div> 
<div class="float"></div> 

CSS :

.float { 
    width:33.33%; 
    height:400px; 
    float:left; 
} 

OR :

.float { 
    width:33.33%; 
    height:400px; 
    display:inline-block; 
} 

Demonstration

float 또는 display 속성을 사용하여 가로로 정렬 할 수 있습니다.

Answer 2

<div class="container"> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
</div> 

#container { 
    text-align: center; 
} 

.float { 
    display:inline-block; 
    text-align: left; 

    width:100px; 
    height:400px;   
    background:green; 
    margin:5px; 
} 

데모 : http://jsfiddle.net/ts9BB/3/