display: table-*

Свойством display: table в CSS можно достичь точного вертикального выравнивания элементов. И получить целый ряд возможностей управления тегами HTML.

Таблица со свойствами CSS имитирует туже модель что и таблица HTML.

Модель таблицы HTML и CSS
Теги таблицы HTML Свойства display CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

Поддержка

Примеры display: table

Таблица свойствами CSS.

display: table;
  • display: table-row; →display: table-cell;display: table-cell;
  • display: table-row; →display: table-cell;display: table-cell;

Выровнять список с ссылками в центре страницы по горизонтали.

HTML

<ul class="table">
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  <li><a href="#">Ссылка 4</a></li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  background-color: #BD4932;
}
li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}
.table {
  display: table;
  margin: auto
}

Выровнять блок по центру страницы на одинаковом расстоянии со всех сторон.

HTML

<div class="box">
    <p>Блок</p>
</div>

CSS

html {
  height: 100%;
}
body {
  display: table;
  width: 100%;
  height: 100%;
}
.box {
  display:table-cell;
  vertical-align: middle;
  text-align: center;
}

Адаптивный макет с тремя колонками.

Демо