Позиционирование дочерних блоков

236

03 сентября 2018, 23:30

Возникла проблема в простой вещи.
Показывать нечего. В HTML есть 6 блоков, и надо чтобы когда у нас экран достигая определенной длины, в одном ряду осталось 4 блока, а пятый и шестой под вторым и третьим (то бишь по центру). Задать text-align:center` родителю не помогло. (display: flex использовать нельзя)

.dashboard{ //Родитель
width: 100%;
text-align: center;
}
.shorcut{
width: 25%;
}

Answer 1

Нужно задать блокам display: inline-block; В этом случае позиционирование через text-align будет работать.

.dashboard{ //Родитель 
width: 100%; 
text-align: center; 
font-size:0; //Убираем пробелы между блоками 
} 
.shortcut{ 
display: inline-block; 
height: 100px; 
margin-bottom: 10px; 
outline: 1px solid #ccc; 
width: 25%; 
}

<div class="dashboard"> 
  <div class="shortcut"></div> 
  <div class="shortcut"></div> 
  <div class="shortcut"></div> 
  <div class="shortcut"></div> 
  <div class="shortcut"></div> 
  <div class="shortcut"></div> 
</div>