Блог

Я хочу добиться ожидаемого макета ниже (первое изображение), но застрял с фактическим макетом (второй)

Вот как я начал

 .parent .child{
    float: left;
    width: 25%;
    height: 50px;
    margin: 5px 2px 2px 2px;
    background: #000;
}
 

Как я могу довести его до ожидаемого макета?

сохраните css: измените значение с плавающей запятой слева на отображение: встроенный блок

 .parent{ text-align: center;}
.parent .child{
 display:inline-block;
 width: 25%;
 height: 50px;
 margin: 5px 2px 2px 2px;
 background: #000;
}
 

Попробуйте так: ССЫЛКА

css:

 .parent{
    margin: 0 auto;
    display:block;
    text-align:center;

}
.parent .child{
    display:inline-block;
    width: 25%;
    height: 50px;
    margin: 5px 2px 2px 2px;
    background: #000;
}