Вертикальное выравнивание в в div

Подробности

Категория: HTML, CSS, javascript

Создано 06.04.2010 12:51

Обновлено 04.06.2011 16:37

Просмотров: 4400

Выравнивается просто:

.container {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <p class="middled">Вертикально отцентрированный элемент</p>
</div>

Но IE6 не поддерживает display:table-cell;

В IE6 можно воспользоваться js:

.middled {
  margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}

Эту часть css кода можно отделить от основной части для использования только в IE6 с помощью Условные комментарии

Если мы еще хотим отцентрировать блок middled по горизонтали, нужно добавить еще один дополнительный обрамляющий блок для container, который будет играть роль таблицы, зададим для него display:table;

<div class="wrap"><div class="container">
	<p class="middled">Вертикально отцентрированный элемент</p>
</div></div>

CSS в этом случае будет следующий:

*{
	margin:0;
	padding:0;
	
}

.wrap {
	display: table;
	width:100%;
}

.container {
	display: table-cell;
	vertical-align: middle;
	height:500px;
}

.middled{
	width:200px;
	margin:0 auto;
}

Вертикально отцентрированный элемент (230)

Как отцентрировать по вертикали и горизонтали в блоке развернутом по высоте на всю страницу