Способы выравнивания блоков по вертикали

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

Сегодня мы поговорим о том, каким образом производится выравнивание блока вдоль оси ординат или, проще говоря, по вертикали, причем мы будем рассматривать тот случай, когда элемент должен будет располагаться по центру своего родителя.

В те старые добрые времена, когда господствовала верстка в табличном стиле, не возникало никаких проблем, когда нужно было расположить объекта в центре относительно вертикальной оси. Для этого следовало всего лишь обратиться к свойству vertical-align и определить для него значение middle.

Защитные очки для лазера купить там. купить песок щебень дешево с доставкой в Санкт-Петербурге.

Когда табличная верстка стала историей, а на ее место пришла блочная модель, то с центрированием блоков по высоте возникли некоторые проблемы. Как оказалось, блочный элемент не понимает свойство vertical-align со значением middle. Однако, правила CSS могло решить проблему, переопределив блочное поведение на табличное. Это можно сделать с помощью свойства display, назначив ему значение table-cell. После этого блок будет восприниматься системой, как ячейка таблицы. И тут возникает вопрос, в чем же сложность. Ответ довольно предсказуем - Interner Explorer. Этот старичок не позволит Вам расслабляться. Дело в том, что браузер не может работать со значением table-cell. Но и на него можно найти управу, воспользовавшись программным решением на базе expression.

Наиболее распространенное решение

Итак, рассмотрим более подробно решение, которое упоминалось выше. Алгоритм действие довольно простой, хоть и мороки Вам хватит:

в первую очередь находим контейнер, внутри которого будет осуществляться вертикальная центровка. Указываем для него фиксированную высоту, воспользовавшись возможностями свойства height, а далее уже по известному сценарию. Определяем блочному элементу свойства ячейки и указываем значение middle для vertical-align. Таким образом, для большинства браузеров мы справились с поставленной задачей;
теперь возвращаемся к горячо любимому IE. Лечение на основе expression будет представлять из себя скрипт, который поможет вычислить браузеру высоту необходимого родителя и разместить контейнер в его центре. Если мы будем центровать текст, то для него нужно установить вспомогательный контейнер.

Для примера предлагаю выбрать именно тот случай, когда нужно равнять текст:

HTML

	<div>
		<span>текст, который будет размещен по центру</span>
	</div>

CSS

div {
	background: #fe9400; /*выделим границы нашего блока
другим цветом*/
	display: table-cell;/*назначаем блоку свойства ячейки таблицы*/
	height: 200px; /*ограничиваем высоту элемента*/
	vertical-align: middle; /*ставим строку текста в центр*/
	color: #283339; /*для читабельности изменим цвет букв*/
	width: 400px;/*ширину придется тоже ограничить*/
	text-align:center;/*выравнивание по горизонтали*/
}
/*лечим непослушный IE*/
* html div span {
	display: block;
	z-index: expression(
	runtimeStyle.zIndex = 1,
	this == ((200/2)-parseInt(offsetHeight)/2) <0 ? style.marginTop="0"
 : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px');
}
*:first-child+html div span {
	display: block;
	z-index: expression(
	runtimeStyle.zIndex = 1,
	this == ((200/2)-parseInt(offsetHeight)/2) <0 ? style.marginTop="0" :
 style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px');
}

В результате чего в браузере получим следующую картину

По такому же принципу центруются картинки и прочие элементы.

При использовании данного метода стоит учитывать ряд особенностей, которые могут негативно повлиять на выравнивание:

нельзя присваивать родителю свойства плавающего элемента (float), так как в таком случае он определится браузером блочным элементом по умолчанию;
в тоже время нельзя допускать абсолютное и фиксированное позиционирование для этого же элемента (свойство position со значением absolute или fixed);
контейнер, который нужно выравнивать, должен позиционироваться, как блочный элемент (принципиально для IE).

Метод строчных блоков

Этот способ имеет очень много сходств с предыдущим. В соответствии с ним тоже прибегают к свойству display и vertical-align. Это позволяет отцентровать элементы во всех адекватных браузерах. Для всеми любимого старичка нужно снова обращаться к expression, однако в этом случае принцип его работы будет слегка отличаться. В этот раз мы вставим строчный контейнер, благодоря которому будет организовано необходимое выравнивание. Для сохранения чистоты кода предлагаю этот элемент добавить с помощью эмуляции before.

HTML

	<div>
		<span>текст, который будет размещен по центру</span>
	</div>

CSS

div {
	background: #fe9400; /*выделим границы нашего блока
другим цветом*/
	display: table-cell;/*назначаем блоку свойства ячейки таблицы*/
	height: 200px; /*ограничиваем высоту элемента*/
	vertical-align: middle; /*ставим строку текста в центр*/
	color: #283339; /*для читабельности изменим цвет букв*/
	width: 400px;/*ширину придется тоже ограничить*/
	text-align:center;/*выравнивание по горизонтали*/
}
/*лечим IE*/
div {
	z-index: expression(runtimeStyle.zIndex = 1,
 insertAdjacentHTML('beforeEnd', '<div class="auxiliary"></div>'));
}
.auxiliary {
  display: inline-block;/*присваиваем строчно-блочные свойства*/
  vertical-align: middle;/*опять центровка*/
  width: 0px; /*убиваем ширину объекта*/
  height: 100%;/*высота объекта на всю страницу*/
}
span {
 	display: inline-block;/*присваиваем строчно-блочные свойства*/
}
span,
.auxiliary {
	vertical-align: middle;/*опять центровка*/
	display: inline;/*строго строчные параметры*/
}

психология трейдера.

Если все выполнить по указаниям, то получим тот же результат в браузере, что и для предыдущего метода.

Избегаем использования expression

Также существует метод, позволяющий избежать применения expression. Он заключается в применении вспомогательного блока. Такой метод имеет свою особенность и вынуждает разделить верстку, предназначенную нормальным браузерам и для IE.

HTML

<div>
	<div class="block">
		<span> текст, который будет размещен по центру</span >
	</div>
</div>

CSS

div {
	position:relative;/*устанавливаем относительное
позиционирование*/
	display:table;/*контейнер со свойствами таблицы*/
   	height: 400px; /*ограничиваем высоту элемента*/
	width: 350px; /*ограничиваем ширину элемента*/
	border: 1px solid #539127;/*обводим
контейнер тонкой линией по периметру*/
	vertical-align: middle; /*и снова центровка*/
	text-align: center;/*тоже, только по горизонтали*/
}
.block {
	width:100%;/*растягиваем контейнер
на всю ширину*/
	display:table-cell;/*свойства ячейки таблицы*/
	vertical-align:middle;/*и снова центровка*/
	text-align:center;/*тоже, только по горизонтали*/
	position:relative;/*устанавливаем относительное
позиционирование*/
}
span {
	vertical-align: middle;/*опять центровка*/
	display: inline;/*строго строчные параметры*/
}

Такой код будет равнять блоки в нормальных браузерах, а для IE используем следующее

CSS

div {
	overflow:hidden/*контролируем содержимое*/
}
div,
.block {
	display:block/*блочные свойства для элемента*/
}
/*центровка через позиционирование*/
.block {
	top:50%;/*середина по высоте*/
	left:0;/*слева без отступа*/
}
span {
	top:-50%;/*компенсация места снизу*/
	position:relative;/*устанавливаем относительное
позиционирование*/
	display:block/*блочный элемент*/
}