Как центрировать выравнивание плавающих DIVs внутри родительского DIV?

Question

У меня возникла проблема, когда у меня есть три div в родительском 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.

Плавающий элемент используется для перемещения его полностью в одну сторону или другую (что, очевидно, делает противоположность отмеривания). Предотвращение «укладки» является побочным продуктом этого, но есть другие способы удержания элементов от укладки. По умолчанию divs имеет display:block, что означает, что каждый дисплей будет отображаться в отдельной строке («stacking»). Изменяя его на display:inline-block, они отображаются в строке.

Адрес demo.

Answer 2

Попробуйте это. Это происходит потому, что ваш parent и child и держит width из 100%

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

DEMO

Answer 3

удалить float: left; из CSS для .pck1 .pck2 .pck3

обновление: я думаю, это то, что вы ищете:

.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; 
}