|

Блочная верстка. Выравнивание по центру по вертикали и горизонтали внутри родительского блока

1 комментарий

Вопрос, который часто возникает у начинающих верстальщиков — как расположить элемент по центру родительского блока.
Касается это в основном блочной верстки, ибо для табличной все довольно просто — в ячейке таблицы это можно сделать без проблем как в HTML (<td align="center" valign="middle"> : align — выравнивание по горизонтали, valign — по вертикали), так и с помощью CSS (text-align:center; vertical-align:middle;).

С вертикальным выравниванием в блоках все несколько сложнее.


Выравнивание по центру в таблице

Для начала просто выравняем первый наш элемент (в данном примере — таблицу) внутри body по горизонтали. Наверняка вам это уже знакомо — на всех сайтах с фиксированной или полу-резиновой версткой приходилось это делать (те, кого интересует блочная верстка, могу сразу перейти к следующим примерам). Для body задается text-align:center;, а для следующего элемента margin: Npx auto;. Также, обнулим значения margin и padding для body, чтобы отступы во всех браузерах были одинаковы.
Поскольку мы будем выравнивать внутри ячейки блочный элемент с фиксированными размерами, то ему тоже зададим margin:0 auto;. Иначе он прилипнет к левому краю ячейки. Для инлайн-элементов и блоков с не указанной шириной это не нужно.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вертикальное и горизонтальное выравнивание в таблице</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
	font:0.9em Arial, Helvetica, sans-serif;
	text-align:center;
	background:#9F9F9F;
}
#mytable {
	width:80%;
	margin:10px auto;
}
#mytable td {
	height:300px;
	padding:20px;
	vertical-align:middle;
	background:#90FF8F;
}
#aligned {
	width:120px;
	height:120px;
	margin:0 auto;
	padding:10px;
	background:#FF8F8F;
}
</style>
</head>
<body>
<table id="mytable">
	<tr>
		<td>
			<div id="aligned">
				Это выравниваемый по центру элемент
			</div>
		</td>
	</tr>
</table>
</body>
</html>

Что получилось, смотрим тут: пример вертикального и горизонтального выравнивания по центру в таблице.

Что же с блоками?

Вертикальное и горизонтальное выравнивание по центру в блоках

Отрицательное значение margin и абсолютное позиционирование дочернего блока

Сначала рассмотрим способ, предложенный еще на первой версии css-zengarden, если я не ошибаюсь. Способ довольно хитрый и заключается в задании выравниваемому блоку 50%-го смещения по вертикали или горизонтали и обратного смещения с помощью задания отрицательного значения margin на половину высоты или ширины самого блока (включая внутренние отступы — padding). При этом родительскому блоку задается относительное позиционирование (position:relative;), а выравниваемому — абсолютное (position:absolute;). В этом случае нам нужно знать соответствующие размеры выравниваемого блока. — Довольно удобно для позиционирования элементов, размеры которых не меняются — например для позиционирования баннера или счетчика. Удобно потому, что все интересующие нас браузеры в этом случае отображают контент одинаково и нет нужды писать «хаки» или отдельные стили.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вертикальное и горизонтальное выравнивание в блоке</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
	font:0.9em Arial, Helvetica, sans-serif;
	text-align:center;
	background:#9F9F9F;
}
#container {
	width:80%;
	height:300px;
	position:relative;
	margin:0 auto;
	background:#90FF8F;
}
#aligned {
	width:120px;
	height:120px;
	position:absolute;
	left:50%; /* смещаем блок вправо на 50% ширины
	родительского блока */
	top:50%; /* смещаем блок вниз на 50% высоты
	родительского блока */
	padding:10px;
	margin:-70px 0 0 -70px; /* смещаем блок вверх и влево
	на 50% высоты и ширины самого блока: (120px + 20px)/2
	(20px добавляет padding) */
	background:#FF8F8F;
}
</style>
</head>
<body>
<div id="container">
	<div id="aligned">
		Это выравниваемый вертикально и горизонтально по
		центру родительского элемента блок
	</div>
</div>
</body>
</html>

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

Просто замечательно. Но есть пара серьезных проблем.
1-я проблема заключается в том, что если в нашем случае дочерний блок будет больше ширины окна браузера, то он сместится за пределы родительского блока. Посмотреть, что получится можно на этом примере с увеличенным дочерним блоком (проскрольте вправо до конца). Это «ломает» лэйаут на сайтах, которые рассчитаны на большое разрешение экрана при просмотре их через браузеры нетбуков или иных мобильных устройств с низким разрешением экранов.
2-я проблема состоит в том, что так можно позиционировать только блок с фиксированными размерами, а это далеко не всегда удобно.

Вертикальное центрирование в блоках при помощи display:table-cell

С vertical-align в таблице было лучше. Но у нас возникает очередная проблема — vertical-align:middle; не сработает нужным образом в блочном элементе.
Выход — отобразить родительский блок как ячейку таблицы. Для управления свойствами отображения есть параметр display. Чтобы блок в браузере показывался как ячейка добавим ему display:table-cell;. Теперь все прекрасно, кроме одного момента. Теперь, когда родительский блок превратился в ячейку таблицы, его размер зависит от размера контента. А он должен занимать все пространство body, чтобы блок в нем центровался правильно. Заставим и body, и наш родительский блок занимать все окно браузера — выставим им высоту и ширину в 100%.
Но и этого не достаточно! Чтобы body на самом деле занял все пространство окна, а наш блок div id="container" растянулся на всю его высоту и ширину, зададим для body display:table; position:absolute; и bottom:0;.

Это работает во всех современных браузерах, но не в Internet Explorer 6 и 7. 7-й Эксплорер «не понимает» display:table-cell, а 6-й еще и display:table;.
Для этих браузеров мы воспользуемся CSS-expression и специальными условными комментариями, которые позволяют подключить фрагменты кода или контента специально для отдельных версий Internet Explorer.

Вот что у нас получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вертикальное и горизонтальное выравнивание в блоке</title>
<style type="text/css">
body {
	display:table;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	bottom:0;
	font:0.9em Arial, Helvetica, sans-serif;
	background:#9F9F9F;
}
#container {
    display: table-cell;
	width:100%;
	height:100%;
    vertical-align: middle;
	text-align:center;
	background:#90FF8F;
}
#aligned {
	width:500px;
	margin:0 auto;
	padding:10px;
	border:1px solid green;
	text-align:left;
	background:#FF8F8F;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
body {
	zoom:1;
}
#container {
	display:inline;
	position:absolute;
    height: expression(
    	document.getElementById("aligned").offsetHeight>
        document.documentElement.clientHeight?
        document.getElementById("aligned").offsetHeight + 'px'
        : document.documentElement.clientHeight + 'px' );
    width: expression(
    	document.getElementById("aligned").offsetWidth&gt
        document.documentElement.clientWidth?
        document.getElementById("aligned").offsetWidth + 'px'
        : document.documentElement.clientWidth + 'px' );
}
#aligned {
	margin-top: expression(
		document.documentElement.clientHeight >= this.offsetHeight ?
		document.documentElement.clientHeight/2 - this.offsetHeight/2
		+ 'px' : 0 );
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
	<div id="aligned">
		<p>
			Это выравниваемый вертикально и горизонтально по центру<br />
			родительского элемента блок
		</p>
	</div>
</div>
</body>
</html>

Посмотреть пример вертикального выравнивания с помощью display:table-cell

CSS-expressions используются только в Internet Explorer и позволяют использовать JavaScript прямо в CSS для получения нужных значений. Большое их количество или неправильное применение может сказаться на производительности браузеров и потому не рекомендуется.
В данном случае не вылетов, ни замедления работы браузера не произойдет даже на слабых системах.



Раздел: Вёрстка. Тэги: <, , />

Следить за комментариями к этой статье (RSS 2.0) | Оставить комментарий

1 комментарий

  1. Шурф 20 Ноябрь 2012 в 23:25

    Автору спасибо!

    2 часа пытался сделать центрирование точек в iNow Slider, ничего не выходило. А этот метод сработал!

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

Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Где взять аватар?

Вход | Регистрация

Первые комментарии незарегистрированных посетителей проходят модерацию.
Адрес сайта публикуется только после регистрации или проверки (для комментаторов).

четыре + 8 =

|