Центрирование блоков внутри блока

444

17 февраля 2017, 01:29

Доброго времени суток. Хочу реализовать следующее (см. схему)

Внутри блока #wrapper (ширина не фиксирована) есть множество блоков div фиксированной ширины и высоты с float:left. Однако т.к. эти блоки прижаты к левому краю, не получается их центрировать, как на рисунке выше.

Не подскажете, как быть?

#wrapper { 
  border: 1px solid black; 
  display: table; 
  margin: auto; 
  width: 70%; 
} 
#wrapper div { 
  border: 1px solid black; 
  float: left; 
  height: 230px; 
  margin: 5px; 
  width: 140px; 
}

<div id='wrapper'> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

Answer 1

#wrapper { 
  border: 1px solid black; 
  display: table; 
  text-align: center; 
  margin: auto; 
  width: 70%; 
  font-size: 0; 
} 
#wrapper div { 
  border: 1px solid black; 
  display: inline-block; 
  vertical-align: top; 
  height: 230px; 
  margin: 5px; 
  width: 140px; 
  font-size: 14px; 
}

<div id='wrapper'> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

делаете через display: inline-block а не float, но у данного метода есть ньюанс как отступ у блоков дочерних #wrapper div, это решается если поставить font-size: 0 блоку #wrapper в вашем случае, но не забываем обратно возвращать размер шрифта#wrapper div чтоб если там будит текст его было видно.

Answer 2

#wrapper { 
  border: 1px solid black; 
text-align: center; 
  margin: auto; 
  width: 70%; 
} 
#wrapper div { 
  border: 1px solid black; 
    display: inline-block; 
  height: 230px; 
  margin: 5px; 
  width: 140px; 
}

<div id='wrapper'> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>