display: table-cell и vertical-align:middle

382
24 ноября 2016, 10:09

Как сделать ширину дочерних элементов управляемой? Или как тут ещё можно выровнять несколько элементов по вертикали в одном диве?

* { 
  margin: 0; 
} 
 
#parent { 
  display: table; 
  width: 100%; 
  height: 80px; 
  border: 1px solid red; 
} 
 
#parent .child {width: 20px !important; 
  display: table-cell; 
  vertical-align: middle; 
}
<div id="parent"> 
  <div class="child">test</div> 
  <div class="child">test</div> 
  <div class="child">test</div> 
</div>

P.S. В дочерних элементах, есть ещё элементы, которым присваивается display: table-cell и vertical-align: middle, поэтому display: flex не сработает.

READ ALSO
Как сделать такое выравнивание с Flex
CSS

Как сделать такое выравнивание с Flex

Добрый день! учусь использовать Flexbox, вот решил сделать такой макет, и не могу понять как выровнять элементы по-левой стороне. Примерно такая...

 410
Поведение адаптивного дизайна
CSS

Поведение адаптивного дизайна

Вот песочница https://jsfiddle. net/o82kLqdn/1/ Там есть боди с размером 600рх, в нём контейнер 521рх в котором три блока по 164рх с отступами по 10рх.

410
Совмещение сетки макета блоком для фона
CSS

Совмещение сетки макета блоком для фона

Не получается совместить резиновый макет с блоком, который будет выступать в роли статичного фона (чистый CSS). То макет сваливается под body, то страница...

 382
Графическое оформление списка
CSS

Графическое оформление списка

Подскажите по списку с оформлением. Что изменить в коде, чтобы если было больше одной строчки в абзаце не сжимался background для номера? Возможно...

 489