Горизонтальное выравнивание по центру в CSS и кроссбраузерность

Введение.К оглавлению

В каменном веке люди использовали тег <center> и свойство align для горизонтального центрирования содержимого сайта. С появлением css, возможности как горизонтального так и вертикального выравниваний резко возросли. Теперь любой контент можно разместить в любом месте сайта без особого расхода нервных клеток.

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

Прежде чем приступить к центрированию элемента, нужно сначала определить к какому типу он относится. Есть два вида контента: блочный (block-level) и строчный (inline-level). К блочному относятся тэги <div> и <h1>, к строчному - обычный текст, <span>, <img> и тд. Каждый из этих типов требует своих методов выравнивания.

Кроме этого, следует обратить внимание на тип позиционирования блоков. Любой html-объект можно разместить на странице в абсолютных координатах (position: absolute;) и в относительных (position: relative;). В первом случае, координаты указываются относительно левого верхнего угла html-документа, а во втором - относительно текущего положения на веб-странице.

Выравнивание строчных элементов (inline-level)К оглавлению

Html-элементы у которых по умолчанию стоит свойство display: inline выравниваются довольно просто. Достаточно указать у их родительского элемента, что весь его текст и изображения будут находиться по центру.

<div>
	Текст в блоке<br>
	<img src="/smile.jpg">
</div>

div {
	text-align: center;
	border: 1px solid #E24912;
}

Текст в блоке

Как видите, у родительского блока мы указали text-align: center; для того, чтобы выровнять отцентрировать его содержимое. Также следует помнить, что это свойство css наследуется потомками, а значит содержимое всех блоков внутри тоже будет выравниваться по центру!

Выравнивание блоков фиксированной шириныК оглавлению

Блоком я буду называть элемент, у которого стоит свойство display: block. Содержимое такого элемента начинается с новой строки относительно других html-объектов. Есть множество способов как выровнять по ширине фиксированный блок. Я покажу как это реализовать с помощью отступов (margin), так как это наиболее кроссбраузерное решение.

Одни разработчики предлагают рассчитывать боковые отступы по пикселям, другие по процентам. Но самый универсальный, на мой взгляд, это автоотступы. Этот метод не трубет никаких подсчетов в голове, и работает во всех современных браузерах начиная с IE6.

<div id="outside">
	Внешний блок
	<div id="inside">Выравниваемый блог</div>
</div>

#outside {
	border:1px solid #E24912;
	height:100px;
}

#inside {
	border:1px solid #009900;
	width:200px;
	height:50px;
	margin: 10px auto;
}

Ключевое строчка здесь margin: 10px auto;. С помощью неё, мы указываем, что у внутреннего блока будут отступы сверху и снизу по 10px, а боковые отступы браузеру нужно рассчитать автоматически. В результате, браузер делает отступы по бокам одинаковыми, и размещает блок по центру относительно внешнего.

Эту строчку также можно расписать в таком виде:

margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;

Также, следует запомнить, что данный метод работает только с блоками с фиксированной ширины, у которых стоит свойство width: 200px с необходимой Вам шириной.

Блоки неизвестной шириныК оглавлению

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

Сейчас я расскажу способ, который основывается на плавающих блоков. Он работает во всех современных браузерах, однако требует указания DOCTYPE в начале html-документа. Вот примеры наиболее часто используемых доктайпов для xhtml и html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

<div id="outside">
	Внешний блок
	<div id="inside">
		<p>
			Блок с динамически изменяемой шириной.<br>
			<img src="/smiley.png">
		</p>
	</div>
</div>

#outside {
	border: 1px solid #E24912;
	overflow: hidden; 
}

#inside {
	position: relative;
	left: 50%;
	float: left;
}

#inside p {
	border: 1px solid #009900;
	position: relative;
	right: 50%;
	z-index: 1;
}

Как работает этот метод? Очень просто. Сначала мы блок inside сдвигаем влево на 50% ширины родительского элемента. Теперь необходимо его свинуть влево на половину своей ширины, чтобы он встал ровно по центру. Для этого делаем внутри inside еще один блок <p>, который сдвигаем на right:50%, относительно внешнего к нему блоку inside.

Теперь давайте рассмотрим подробнее наш код:
overflow: hidden; - необходимо для правильного расчета высоты контейнера, который содержит плавающие элементы.
float: left - делает блок плавающим, уменьшает его размер до размера текста внутри него.
z-index: 1; - для правильного отображения в браузерах ниже IE8.

Абослютно отпозициционированный блок с известной ширинойК оглавлению

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

<div id="center">
	<p>
		Блок с абсолютными координатами.<br>
		<img src="/smiley.png">
	</p>
</div>

#center {
	border: 1px solid #090;
	position: absolute;
	width: 300px;
	left: 50%;
	margin-left: -150px; /*половина ширины*/ 
}

Блок с абсолютными координатами.

При использовании абсолютных координат необходимо помнить, что если у родительского элемента стоит position:absolute; или position:relative;, то кординаты потомка уже будут расчитываться относительно внешнего блока, а не окна браузера.

Абсолютный блок с динамической ширинойК оглавлению

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

<div id="container">
	<div id="outside">
		Внешний блок
		<div id="inside">
			<p>
				Абсолютный блок и с динамической шириной<br>
				<img src="/smiley.png">
			</p>
		</div>
	</div>
</div>

#container {
	position: absolute;
	left: 0;
	height: 100px;
	width: 100%;
    overflow: hidden;
}

#outside {
	position: absolute;
	top: 0;
	width: 200%;
	left: -50%;
}

#inside {
	position: absolute;
	left: 50%;
}

#inside p {
	border: 1px solid #090;
	position: relative;
	left: -50%;
	float: left;
}

width: 200%; мы используем для того, чтобы все это нормально заработало в IE. А затем, чтобы избавиться от полос прокрутки и ненужных отступов используем left: 0; width: 100%; overflow: hidden;.

 К оглавлению