플로팅 DIV를 부모 DIV 내에 가운데 정렬하는 방법?

Question

센터 정렬이 필요한 상위 div 내에 3 개의 div가있는 문제가 있습니다. 나는 텍스트의 중앙 정렬이 보통의 마술을하지 않는 이유를 이해하지 못한다.

여기 Demo fiddle

<div class="container_alt"> 

    <div class="pricing_options_col"> 

     <div class="pck1">pck1</div> 

     <div class="pck2">pck2</div> 

     <div class="pck3">pck3</div> 

    </div> 

</div> 

.container_alt{ 
    max-width: 1000px; 
    margin: 0 auto; 
} 

.pricing_options{ 
    width: 100%; 
    background-color: #fff; 
    height: auto; 
    overflow:auto; 
    text-align:center; 
    display:inline-block; 
} 

.pricing_options_col{ 
    width: 100%; 
    max-width:1000px; 
    margin: 0 auto; 
    text-align:center; 
    padding:100px 0; 
    display:inline-block; 
} 


.pck1{ 
    float: left;  
    margin: 0 auto; 
    width: 200px; 
    background-color: green;  
    border-radius: 6px; 
    box-sizing:border-box; 
    padding: 20px;   
} 

.pck2{ 
    float: left;  
    margin: 0 auto; 
    width: 400px; 
    background-color: red; 
    border-radius: 6px; 
    box-sizing:border-box; 
    padding: 20px; 
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 0px 20px 0px rgba(50, 50, 50, 0.75); 
    z-index: 999999;  
} 

.pck3{ 
    float: left;  
    margin: 0 auto; 
    width: 200px; 
    background-color: pink; 
    border-radius: 6px; 
    box-sizing:border-box; 
    padding: 20px;     
} 

Answer 1

.pck1, pck2 및 pck3의 경우 float:left을 제거하고 display:inline-block을 추가하십시오.

요소를 떠 다니는 것은 요소를 한쪽 또는 다른쪽으로 이동시키는 데 사용됩니다 (분명히 연쇄 반응의 반대입니다). "스태킹"을 방지하는 것은 그 부산물이지만 요소를 스태킹되지 않도록하는 다른 방법이 있습니다. 기본적으로 div는 display:block입니다. 즉, 각 줄마다 고유 한 줄 ("스태킹")을 표시합니다. display:inline-block으로 변경하면 인라인으로 표시됩니다.

여기에 demo입니다.

Answer 2

문제이 시도를 재현했다. 내가이 무엇을 추측 : 당신의 parent 및 child이 모두 .pck1 .pck2 .pck3

갱신의 CSS에서 float: left;를 제거 width100%

.pricing_options_col{ 
    width: 100%; <-- Remove 
    max-width:1000px; 
    margin: 0 auto; 
    text-align:center; 
    padding:100px 0; 
    display:inline-block; 
} 

DEMO

Answer 3

의 보유하고 있기 때문이다 당신은 찾고 있습니다 :

.pricing_options_col{ 
    width: 800px; 
    margin-left:auto; 
    margin-right:auto; 
    max-width:1000px; 
    margin: 0 auto; 
    text-align:center; 
    padding:100px 0; 
    display:inline-block; 
}