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

Great Rash · February 3, 2010

Да-да, оно возможно! Кроссбраузерно, без скриптов, без отрицательных магринов, для текста любой высоты!

Совершенно случайно нарвался в гугле на этот способ и хочу поделиться с вами товарищи. Вот немного подрихтованный мной код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			height: 100%;
		}

		.parent {
			width:	70%;
			height: 70%;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}

		.child,
		.helper {
			display: -moz-inline-block;
			display: inline-block;
			vertical-align: middle;
		}

		.child {
			width: 50%;
		}

		.helper {
			width: 0;
			height: 100%;
		}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
		.child,
		.helper {
			zoom: 1;
			display: inline;
		}
	</style>
	<![endif]-->
</head>

<body>

	<div class="parent">
		<div class="child">
			Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна. 
			Но я все равно останусь по середине!
		</div>
		<div class="helper"></div>
	</div>

</body>
</html>

А вот ссылка на оригинал автора: http://www.futurecolors.ru/blog/wp-content...10/middle2.html

Вот ссылка на описание метода: http://www.futurecolors.ru/blog/2009/10/10...align/#more-449

Автор Артём Голиков - респект ему и уважуха!

P.S.

Пять минут назад начал прикручивать метод к реальному проекту

Надеюсь поможет и вам.

psywalker · February 3, 2010

Прикольно дружище, спасибо, примерчик уже в архиве.

aTei · February 3, 2010

5 минут просидел, пока понял в чем фишка =)

Чтобы было понятней (а это не сразу очевидно)

Замените стили .helper на это

	.helper {
		height: 100%;
		width: 10px;
		border:1px solid black;
	}

Фишка в том, что хелпер и блок с текстом стают инлайновыми.

И выравниваются по центру строки, в которой находятся.

И, когда мы задаем высоту хелпера в 100%, соответственно задается и высота строки.

Вот такой интересный фокус покус.

Спасибо Great Rush'у за то, что донес такое элегантное решение до публики.

bbsalex · April 29, 2010

Спасибо за примерчик, сегодня помогло очень.

SelenIT · April 30, 2010

С инлайн-блоками нужно постоянно держать ухо востро по поводу пробелов между тегами. В данном примере повезло, что ширина чайлда меньше 100% ширины парента, а то бы хелпер перенесся на новую строку - и привет... Имхо, пробел перед хелпером желательно убрать, а для пущей надежности паренту добавить white-space: nowrap (ну а чайлду вернуть white-space: normal).

Great Rash · April 30, 2010

<div class="parent"><!--
	--><div class="child">
		Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна. 
		Но я все равно останусь по середине!
	</div><div class="helper"></div><!--
--></div>

Можно вот так для сохранения читабельности.

alexshvarts · August 19, 2010

потёрто

Edited August 19, 2010 by alexshvarts

ahtoh-d · September 15, 2010

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			height: 100%;
		}

		.header {
			max-width: 1000px;
			min-width: 1000px;
			height: 100px;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}	   

		.parent {
			max-width: 1000px;
			min-width: 1000px;
			height: 70%;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}

		.footer {
			max-width: 1000px;
			min-width: 1000px;
			height: 100px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			border: red 1px dotted;
		}

		.child,
		.helper {
			display: -moz-inline-block;
			display: inline-block;
			vertical-align: middle;
		}

		.child {
			width: 50%;
		}

		.helper {
			width: 0;
			height: 100%;
		}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
		.child,
		.helper {
			zoom: 1;
			display: inline;
		}
	</style>
	<![endif]-->
</head>

<body>
	<div class="header">

	header

	</div>
	<div class="parent">
		<div class="child">
			Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна. 
			Но я все равно останусь по середине!
		</div>
		<div class="helper"></div>
	</div>

	<div class="footer">

	footer

	</div>
</body>
</html>

psywalker · September 15, 2010

Так не пойдёт?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			height: 100%;
		}

		.parent {
			width:	70%;
			height: 100%;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}

		.child,
		.helper {
			display: -moz-inline-block;
			display: inline-block;
			vertical-align: middle;
		}

		.child {
			width: 50%;
		}

		.helper {
			width: 0;
			height: 100%;
		}
		#foot { height: 100px; margin-top: -101px; background: red;}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
		.child,
		.helper {
			zoom: 1;
			display: inline;
		}
	</style>
	<![endif]-->
</head>

<body>

	<div class="parent">
		<div class="child">
			Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна.
			Но я все равно останусь по середине!
		</div>
		<div class="helper"></div>
	</div>
	<div id="foot">FOOTER</div>
</body>
</html>

ahtoh-d · September 15, 2010

Да! похоже на правду! СПАСИБО огромное)) Модифицировал немного под требования...

1. Резиновая середина.

2. блок контента не более и не менее 1000px тоже резина.

Получилось нечто такое: похоже на правду? Но откуда взялась полоса прокрутки и как её убрать?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			height: 100%;
		}

		#header { 
			height: 100px; 
			margin-top: 0px; 
			background: red; 
			width: 1000px;
			margin-bottom: auto;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}

		.parent {
			min-width: 1000px;
			max-width: 1000px;
			height: 100%;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}

		.child,
		.helper {
			display: -moz-inline-block;
			display: inline-block;
			vertical-align: middle;
		}

		.child {
			width: 50%;
		}

		.helper {
			width: 0;
			height: 100%;
		}
		#foot { 
			height: 100px; 
			margin-top: -201px; 
			background: red; 
			width: 1000px;
			margin-bottom: auto;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
		.child,
		.helper {
			zoom: 1;
			display: inline;
		}
	</style>
	<![endif]-->
</head>

<body>
	</div>
	<div id="header">header</div>

	<div class="parent">
		<div class="child">
			Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна.
			Но я все равно останусь по середине!
		</div>
		<div class="helper"></div>
	</div>

	<div id="foot">FOOTER</div>
</body>
</html>

psywalker · September 15, 2010

Ты допускаешь детские ошибки дружище. Мой тебе совет - начни учить http://stepbystep.htmlbook.ru/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			height: 100%;
		}

		#header {
			height: 100px;
			margin-top: 0px;
			background: red;
			width: 1000px;
			margin-bottom: -100px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}

		.parent {
			min-width: 1000px;
			max-width: 1000px;
			height: 100%;
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
		}

		.child,
		.helper {
			display: -moz-inline-block;
			display: inline-block;
			vertical-align: middle;
		}

		.child {
			width: 50%;
		}

		.helper {
			width: 0;
			height: 100%;
		}
		#foot {
			height: 100px;
			margin-top: -101px;
			background: red;
			width: 1000px;
			margin-bottom: auto;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
		.child,
		.helper {
			zoom: 1;
			display: inline;
		}
	</style>
	<![endif]-->
</head>

<body>


	<div class="parent">
	<div id="header">header</div>
		<div class="child">
			Я длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна.
			Но я все равно останусь по середине!
		</div>
		<div class="helper"></div>
	</div>

	<div id="foot">FOOTER</div>
</body>
</html>

ahtoh-d · September 16, 2010

Да согласен... уже учу) Уже и сам ошибку нашёл)... просто нужно было быстро сгенерировать сайтик... Кстати, окончательный вариант в хроме не пашет(...

psywalker · September 16, 2010

Ошибаешься, мой вариант в Хроме пашет.

Alan_Gray · October 3, 2010

Ого, как всё сложно.

Во времена вёрстки table'ами проблем с вертикальным выравниванием не было проблемы.

Ждём CSS4 со свойствами content-valign и content-align.

И рабочий height в процентах, который будет за 100% брать всю высоту окна браузера, наконец-то.

И где это всё?

Vlad · October 3, 2010

Это все и осталось. Смотри <table> и <td>.

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

SelenIT · October 3, 2010

Во времена вёрстки table'ами проблем с вертикальным выравниванием не было проблемы.

Display:table-cell с легкостью возвращает те времена (ну да, с легкостью, если забыть про IE7-...).

рабочий height в процентах, который будет за 100% брать всю высоту окна браузера, наконец-то

Неужели кто-то из верстальщиков до сих пор не знает про html { height: 100% }? По-моему, это давно стало общим местом и не проблемой. Вот наследование фактической высоты родителя — это, согласен, проблема (хотя решается, например, через абс. позиционирование).

И где это всё?

> 90% этого — в спецификации. Более жизненный вопрос — "где поддержка этого всего в браузерах, особенно синих?"

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information