Выравнивание текста по вертикали

textalign
Довольно часто приходится сталкиваться с проблемой выравнивания текста списка по середине.
С горизонтальным выравниванием — все понятно: text-align:center;
А вот в вертикальным выравниванием? а если в одном списке сочетаются как с одной строкой так и с двумя?

На самом деле все просто:
HTML:
<style>
.vyrovnyat {
 display: table;
  width: 100%;
  height: 7em; /* работает также как min-height, то есть будет растягиваться пока не поместится всё содержимое */
  text-align: center;
  background: #fff5d7;
}
.vyrovnyat div { /* для IE8+ */
 display: table-cell; vertical-align: middle;
}
.vyrovnyat div:nth-child(2) { /* не менее высоты родителя */
  background: #9F9;
}
</style>

<div class="vyrovnyat">
  <div>какой-то текст</div>
  <div>первая строка<br>вторая строка</div>
  <div>какой-то текст</div>
</div>

Также это применимо к списокам       <ul> <li></li> </ul>


Оставить комментарий