4 блока по центру

Question

Есть div, который содержит блоки..

<div class="blocks">
 <div class="black"></div>
 <div class="black"></div>
 <div class="black"></div>
 <div class="black"></div>
 <div class="black"></div>
</div>

и эти блоки должны отображаться по центру..

.blocks {
  margin-left:auto;
  margin-right:auto;
  width: 80%;
}

.block {
  float: left;
  padding: 24px;
  width: 261px;
  height: 325px;
  background: #FFFFFF;
  border-radius: 16px;
  margin: 20px 20px;
}

но не отображаются.. они сьежают влево!! что я делаю не так???

Answer 1

Как минимум у вас разница между black и block.

Во-вторых задний фон у блоков белый. Поэтому ничего не видно.

А в целом, пора переходить на флексы. Удобно.

.blocks {
/*
  margin-left:auto;
  margin-right:auto;
  width: 80%;
  */
   display: flex; 
   justify-content: center;
}

.block {
  /*float: left;*/
  padding: 24px;
  width: 261px;
  height: 325px;
 /* background: #FFFFFF;*/
  border-radius: 16px;
  margin: 20px 20px;
  
  background: black;
}

<div class="blocks">
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
</div>

БЛОГ НА HUSL

4 блока по центру

Ответы (1 шт):