Центрировать выравнивание нескольких дочерних DIV

Я нахожу, что это немного запутывает работу над этой проблемой.

У меня есть родительский DIV и 3/более Child DIV.

Родитель DIV выравнивается по центру, а дочерний DIV должен лежать влево, но должен быть выровнен по центру.

CSS содержит

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

У меня есть образец ссылки на код здесь...

Ответы

Ответ 1

Если вы хотите горизонтально выровнять свои элементы по центру, то не плавайте их.

Измените способ отображения на inline-block и выровняйте их по центру, изменив стиль text-align своего родителя:

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}

<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

Ответ 2

Автоматические поля не будут применяться к элементу с поплавком. Удаление плавающего элемента должно начаться...

Ответ 3

Добавьте это свойство в класс div в нижней части, чтобы убедиться, что дочерний элемент не соответствует высоте div

min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;