Вертикальное выравнивание внутри дива.

Semreg · October 23, 2009

Научите правильно это делать кросбраузерно и именно через vertical-align: middle

Вариант с padding или line-height не подходит. :angry:

Интересует, как правильно выравнивать по вертикали текст или другой див.

Заготовил формочку:

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

<head>
<style type="text/css">

* { margin: 0; padding: 0;}

.max1 {
  height : 300px;
  background: red;
}

.max2 {
  height : 300px;
  background: black;
}

.max2 div {
  height : 50px;
  width : 50px;
  background: green;
}

</style>
</head>

<body>

<div class="max1">
  text<br>text<br>text<br>text<br>text
</div>

<div class="max2">
  <div></div>
</div>

</body>
</html>

Justnewone · October 23, 2009

почитайте про "кроссбраузерное вертикальное выравнивание", там где display:table для нормальных, или экспрешн для ненормальных, или для них же костыль из трех дивов. Много инфы, правда. Влом повторяться. тут на форуме уже поднималось не один раз.

а просто диву vertical-align: middle не поркатит. vertical-align: middle работает только для ячеек таблицы и только для инлайн элементов относительно строки.

alexander.parphenuyk · October 23, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0;}
/*————————————————————————————————*/
.case{
width:120px;
height:250px;
display:table-cell;
vertical-align:middle;
overflow:hidden;
background-color:#FFFFCC;}
/*——- это для удобства можно вынести в IEшный стиль.. как делаю я..——*/
*html .case span { display: inline-block; height: 100%; }
*html .case { display: block; }
*html .case * { vertical-align: middle; }
/*————————————————————————————————*/
.element{ width:40px; height:40px; background-color:#666666; margin:0 auto;}/*- вертикально выравнивается как ты хотел....-*/
</style>
</head>
<body>
<div class="case"><span></span><div class="element"></div></div>
</body>
</html>

Edited October 23, 2009 by alexander.parphenuyk

psywalker · October 24, 2009

Унесёшь?

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0; }


		body,html { height: 100%;}

		div {
			display: table;
			vertical-align: middle;
			height: 60%;
			background: red;
			behavior: url('table-cell.htc'); /* что-бы работало display: table; в ИЕ */
		}

		div div {
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			background: red;
		}
	</style>
</head>

<body>

	<div>
		<div>

			111<br />111<br />111<br />111<br />
		</div>
	</div>

</body>
</html>

А вот и сам файлик behavior: url('table-cell.htc');

<public:component>
	<public:attach event="oncontentready" onevent="propertyChanged()" />
	<script language="Javascript">
		function propertyChanged() {
			var s = document.createElement('span');
			s.innerHTML = element.innerHTML;
			element.innerHTML = '';
			element.appendChild(s);

			element.style.display = 'block';

			s.style.display = 'block';
			s.style.position = 'relative';
			s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';

			window.onresize = function() {
				s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
			}
		}
	</script>
</public:component>

Semreg · October 24, 2009

почитайте про "кроссбраузерное вертикальное выравнивание"...

Если не перестанешь мне <strong>Вы-кать</strong> начну к тебе так обращатсья: "Господин, Justnewone".

Заканчивай меня на "вы" называть.

Уже почти родные люди...

Волкер, а откеда ты кусок js-кода нарыл? Тыж вроде не рубишь в js?

Я тоже в нем не рублю. Поэтому ко всем js кускам отношусь с опаской.

Метеду проверил. Рабочая. Пасибо за пример. Сохраню в своей библиотеке.

alexander.parphenuyk, а в твоем примере чето я не разобрался...

Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял

psywalker · October 24, 2009

Semreg

Если не перестанешь мне <strong>Вы-кать</strong> начну к тебе так обращатсья: "Господин, Justnewone".
Заканчивай меня на "вы" называть.
Уже почти родные люди...

Он меня тоже долго на "Вы" называл, пока я не научил его делать трёхколоночный макет

Волкер, а откеда ты кусок js-кода нарыл? Тыж вроде не рубишь в js?
Я тоже в нем не рублю. Поэтому ко всем js кускам отношусь с опаской.

А это мне короче мастер Great Rash дал, а он ещё тот JS-джидай

А вот тебе ещё пару примерчиков из моей заначки, без JS:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma;
		}
		.parent {width:500px; height:400px; text-align:center; border:1px solid #dd0; background: #ffa; display: table; vertical-align: middle;  }

.child {
	...
	display:-moz-inline-box;
	display:inline-block;
	display: table-cell;
	vertical-align:middle;
	zoom:1;
	//display:inline;
}
.helper {
	...
	display:-moz-inline-box;
	display:inline-block;
	vertical-align:middle;
	height:100%;
	width:0px;
	zoom:1;
	//display:inline;

}
	/* СПИСОК ТЕБЕ ЧУВАК */
	ul.one { overflow: hidden; height: 50px; background: #999;}
		ul.one li { height: 50px; float: left; width: 24%; text-align: center;  vertical-align: middle; display: table;}
			ul.one a { display: inline-block; vertical-align: middle; zoom:1; display: table-cell;}
				ul.one span { display: inline-block; height: 100%; zoom:1; vertical-align: middle; width: 0;}

	/* Второй список */
	ul.two { height: 50px; width: 100%; display: table;}
		ul.two li { float: left;display: table-cell; vertical-align: middle; height: 50px; width: 24%;}
		ul.two li span { 
			display: table-cell;
			vertical-align: middle;
			height: 50px;
			display: block;
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
		ul.two li span a {
			display: block;
			text-align: center;
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
	</style>
</head>

<body>
<div class="parent">
	<div class="child">Текст, который заключён во внутренний блок.<br />Текст, который заключён во внутренний блок </div>
	<div class="helper"></div>
</div>

<ul class="one">
	<li><a href="#">Текст, который заключён</a><span></span></li>
	<li><a href="#">Текст, который заключён<br />Текст, который заключён</a><span></span></li>
	<li><a href="#">Текст, который заключён</a><span></span></li>
	<li><a href="#">Текст, который заключён</a><span></span></li>
</ul>
<br /><br />
<ul class="two">
	<li><span><a href="#">Текст, который заключён</a></span></li>
	<li><span><a href="#">Текст, который заключён<br />Текст, который заключён</a></span></li>
	<li><span><a href="#">Текст, который заключён</a></span></li>
	<li><span><a href="#">Текст, который заключён</a></span></li>
</ul>
</body>
</html>

Edited October 24, 2009 by psywalker

Semreg · October 25, 2009

А вот тебе ещё пару примерчиков из моей заначки

Спасибо, амиго! Позабирал в коллекцию.

psywalker · October 25, 2009

Спасибо, амиго! Позабирал в коллекцию.

Да не о чём, пиши всегда

alexander.parphenuyk · October 25, 2009

alexander.parphenuyk, а в твоем примере чето я не разобрался...

Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял

чёта я сам гдето прое$ся где-то тут.... Ну хотябы попытался помоч....

ну с картинками внутри работает... вроде бы...

psywalker · October 25, 2009

alexander.parphenuyk, а в твоем примере чето я не разобрался...
Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял
чёта я сам гдето прое$ся где-то тут.... Ну хотябы попытался помоч....
ну с картинками внутри работает... вроде бы...

Да нормал, я в принципе твою мысль понял, способ тоесть

Sign In

Вертикальное выравнивание внутри дива.

Question

Semreg

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

alexander.parphenuyk

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Semreg

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Semreg

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

alexander.parphenuyk

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information