Ящик центра div в гибком контейнере div

Question

У меня есть 1 Div с шириной 80%, и я хочу иметь в нем ящики, но я хочу, чтобы они были центрированы каждый раз и не имеет значения, какая ширина имеет внешний div.

.kachel_wrapper { 
 
\t margin: auto auto; 
 
\t width:80%; 
 
\t background:orange; 
 
\t min-height:450px; 
 
\t margin-top:70px; 
 
} 
 

 
.kachel { 
 
\t height:180px; 
 
\t width:180px; 
 
\t margin-top:20px; 
 
\t float:left; 
 
\t margin: auto auto; 
 
\t margin-top:15px; 
 
\t margin-left:10px; 
 
\t background:#6e7176; 
 
\t }

<div class="kachel_wrapper"> 
 
<div class="kachel"></div> 
 
<div class="kachel"></div> 
 
<div class="kachel"></div> 
 

 
</div>

Как я могу исправить эту проблему? И получить их по центру?

Answer 1

Просто отобразить .kachel дивы inline-block и установить .kachel_wrapper в text-align:center;:

.kachel_wrapper { 
 
    margin: auto auto; 
 
    width: 80%; 
 
    background: orange; 
 
    min-height: 450px; 
 
    margin-top: 70px; 
 
    text-align: center; 
 
} 
 
.kachel { 
 
    height: 180px; 
 
    width: 180px; 
 
    margin-top: 20px; 
 
    margin-top: 15px; 
 
    margin-left: 10px; 
 
    background: #6e7176; 
 
    display: inline-block; 
 
}

<div class="kachel_wrapper"> 
 
    <div class="kachel"></div> 
 
    <div class="kachel"></div> 
 
    <div class="kachel"></div> 
 

 
</div>

Answer 2

Я не уверен, если вы хотите, дивы центрируется по вертикали или по горизонтали. Если вы хотите, чтобы они центрировались по горизонтали, обратитесь с ответом @Jacob Grey. Если вы хотите, чтобы они по центру вертикально, удалите float: left; из .kachel и добавить display: block; затем в центр добавить margin-left: auto; и margin-right: auto;:

.kachel_wrapper { 
 
    margin: auto auto; 
 
    width: 80%; 
 
    background: orange; 
 
    min-height: 450px; 
 
    margin-top: 70px; 
 
} 
 

 
.kachel { 
 
    display: block; 
 
    height: 180px; 
 
    width: 180px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 10px; 
 
    background: #6e7176; 
 
}

<div class="kachel_wrapper"> 
 
    <div class="kachel"></div> 
 
    <div class="kachel"></div> 
 
    <div class="kachel"></div> 
 

 
</div>