Текст в div вертикально спозиционирован

BassEast · September 11, 2009

Всё никак не могу достучаться до решения, как сделать вертикальное выравнивание текста в блоке (div) без таблиц естественно.

К примеру у нас есть div с высотой в 100px, нам надо чтобы текст, который будет находится внутри него, постоянно находился по центру по вертикали, вне зависимости от количества символов.

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

CSS

.myDiv {
 height:100px;
 position:relative;
}

.myDiv .middle {
 position: absolute;
 top:40%;
}

HTML

<div class="myDiv">
<div class="middle"> :blink: содержимое по-середине, но когда текст переходит на другую строчку, вся логика разваливается.</div>
</div>

В остальных случаях это не работает.

И чего делать? Как быть?

Edited September 11, 2009 by BassEast

Justnewone · September 11, 2009

Дисплей:тейбл-целл.

BassEast · September 11, 2009

не для: IE6 IE7 IE8

WalkMan · September 11, 2009

для ие можно воспользоваться поиском

Google

в первом результатепоиска вот такое решение:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>


<style type="text/css">
div {
	position: relative;
	border: 1px solid #000;
	height: 10em;
	width: 10em;

}
div span {
	display: block;
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
}

div span span {
	position: relative;
	top: -50%;
}


</style>






</head>

<body>


<div>
  <span><span>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </span></span>
</div>


</body>

</html>

в ие тестере в 6 и 7 отображает по центру

Great Rash · September 11, 2009

Сие решение далеко не идеально и подходит не во всех случаях. Ща поищу ссылку на .htc который написал один камрад, он эмулирует display-table для ИЕ.

psywalker · September 11, 2009

Great Rash said:
Сие решение далеко не идеально и подходит не во всех случаях. Ща поищу ссылку на .htc который написал один камрад, он эмулирует display-table для ИЕ.

Да пожалуйста если можно, то пример с решением

WalkMan · September 11, 2009

+1

а то тут на форуме мало интересных решений можно найти

в основном все по блогам приходиться искать

BassEast · September 11, 2009

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

WalkMan said:
+1
а то тут на форуме мало интересных решений можно найти
в основном все по блогам приходиться искать

плохо ищите , не зря же здесь писанина вся ведётся.

Edited September 11, 2009 by BassEast

psywalker · September 11, 2009

BassEast said:
на самом деле есть решение, и их несколько, но в моём случае.. они не пока не помогают, кручу сижу, верчу, может быть вообще не от туда зашел... но сегодня мозг не варит.
плохо ищите , не зря же здесь писанина вся ведётся.

Не волнуйтесь братцы, щас дядя Great вам такое решение забацает, ушатаетесь все

Great Rash · September 11, 2009

Нифига я не нашел, поэтому написал самолично.

Создаем файл с именем 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);

			s.style.display = 'block';
			s.style.position = 'relative';
			s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
		}
	</script>
</public:component>

Потом собственно HTML:

<!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;
		}

		div {
			display: table-cell;
			height: 300px;
			background: red;
			behavior: url('table-cell.htc');
		}
	</style>
</head>

<body>

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

</body>
</html>

Кажись работает! Проверил в ИЕ8 (и в эмуляции семерки). Интересно что будет в шестерке?

BassEast · September 11, 2009

Great Rash said:

Нифига я не нашел, поэтому написал самолично.

Создаем файл с именем 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);

			s.style.display = 'block';
			s.style.position = 'relative';
			s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
		}
	</script>
</public:component>

Кажись работает!

Psywalker, ты кажется искал джедая!

psywalker · September 11, 2009

BassEast said:
Psywalker, ты кажется искал джедая!

А ты сразу не понял, на кого я намекал????? B)

Great Rash · September 11, 2009

В ИЕ6 тоже работает как часы

Ишь ты, чет даже не верится, что все так хорошо...

Оттак можно еще и высоту дива в процентах задавать:

<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>

Edited September 11, 2009 by Great Rash

psywalker · September 11, 2009

Great Rash said:

В ИЕ6 тоже работает как часы

Ишь ты, чет даже не верится, что все так хорошо...

Оттак можно еще и высоту дива в процентах задавать:

<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>

Вот так делаю, не работает в %, почему??

<!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;
		}

		div {
			display: table-cell;
			height: 30%;
			background: red;
			behavior: url('table-cell.htc');
			vertical-align: middle;

		}

	</style>
</head>

<body>

	<div>

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

	</div>

</body>
</html>

Great Rash · September 11, 2009

Ай-яй-яй psywalker, учи матчасть! А где height у боди и хтмл? От чего у тебя див будет 30% отсчитывать?

UPD: Вот уж от кого не ожидал! :)

Edited September 11, 2009 by Great Rash

psywalker · September 12, 2009

Great Rash said:
Ай-яй-яй psywalker, учи матчасть! А где height у боди и хтмл? От чего у тебя див будет 30% отсчитывать?
UPD: Вот уж от кого не ожидал! :)

да а ты думаешь я не ставил height? ставил, и всё равно нет эффекта, может матчасть мне и надо учить, но в данной ситуации ставил height чес слово

Вобщем щас попробовал снова, в ИЕ6-7 сработалоо))), а вот в ФФ и других браузерах почему то нет, вот почему?

<!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-cell;
			height: 60%;
			background: red;
			behavior: url('table-cell.htc');
			vertical-align: middle;

		}

	</style>
</head>

<body>

	<div>

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

	</div>

</body>
</html>

Edited September 12, 2009 by psywalker

Great Rash · September 13, 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;
		}

		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>

Вот так работает для Мозиллы. Хм странно, я проверял на работе (там стоит Мозилла 3.5) и у меня все показывалось чики-чики. А вот дома стоит Мозилла 3.0 и действительно не отображалось как надо. Инетересно какая из них врет...

psywalker · September 13, 2009

Great Rash said:
<!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;
		}

		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>
Вот так работает для Мозиллы. Хм странно, я проверял на работе (там стоит Мозилла 3.5) и у меня все показывалось чики-чики. А вот дома стоит Мозилла 3.0 и действительно не отображалось как надо. Инетересно какая из них врет...

Воо, спасибо друг, теперь всё работает! А с чем связано что не работало, я даже и не знаю

Searcher · September 14, 2009

вот же уже придумано все для всех браузеров: http://www.umade.ru/resources/css/deadcent...eadcentre2.html

mishka · September 14, 2009

Quote
вот же уже придумано все для всех браузеров: http://www.umade.ru/resources/css/deadcent...eadcentre2.html

В этом примере высота блока строго задана. Как быть с динамической высотой?

Кстати ктонить сделает и по горизонтали и по вертикали центрирование. И динамичесский и по горизонтали и по вертикали?

Great Rash · September 14, 2009

2Searcher: Этот способ не всегда подходит.

2mishka2: Чем не устраивает мой способ?

mishka · September 14, 2009

Quote
Чем не устраивает мой способ?

всем устраивает, только експрешены для ие6-7 надо, и все гуд.

Я и неговорил что меня неустраивает твой способ.

Quote
всем устраивает, только експрешены для ие6-7 надо, и все гуд.
Я и неговорил что меня неустраивает твой способ.

Извини перепутал. Неустраивает тем что я не юзаю htc

Но всеравно отличный способ. Я его себе в примеры закинул

Можна уточнить какой именно способ? с htc или без?

Я пользуюсь всегда тем способом где без htc, только там експрешены еще нужны для ие6-7

Edited September 14, 2009 by mishka2

Great Rash · September 14, 2009

Да, я про htc имел в виду... В принципе это тот же яваскрипт и разницы особой нет (разве что в способе подключения). Главное что меня интересует это будет ли работать htc при отключенном яваскрипте у юзера. Хоть и 99% народу не отключают скрипты (а скорее всего даже не знают как это сделать), а все таки было бы приятно забороть это недоразумение.

Searcher · September 15, 2009

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>

<style type="text/css">
html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.blockcent {margin: 0 auto; height:100%; display: table; position: static; overflow: auto;}
.centmiddle {display: table-cell; vertical-align: middle; text-align:center; position: static;}
.centinner {position: static; border: 1px solid black; }

</style>


<!--[if lt IE 7]>
<style type="text/css">

.blockcent {position: relative; overflow: hidden;}
.centmiddle {position:absolute; top:50%; left:50%;}
.centinner {position:relative; top:-50%; left:-50%;}

</style>
<![endif]-->


</head>

<body>

<div class="blockcent">
	<div class="centmiddle">
		<div class="centinner">центрирование<br>без указания<br><br><br><br><br><br><br>ширины и высоты</div>
	</div>
</div>

</body>
</html>

psywalker · September 15, 2009

Searcher

Не всё так просто как кажется, изначально автору этот вариант не подходил, по каким то своим причинам, а вот вариант Great Rash ему понравился, пусть ответит сам тогда, почему

Searcher · September 15, 2009

все совсем не просто, особенно когда не вникают в предложенные решения, а просто ждут готовое решение. Я то вариант на который ссылку давал переделал под его нужды и выложил... там детали может только какие-то поменять надо...

Sign In

Текст в div вертикально спозиционирован

Question

Link to comment

Share on other sites

25 answers to this question

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

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

Join the conversation

Обсуждения

Important Information