Выравнивание <p> по вертикали в подвале <div>

Triumfator · December 16, 2009

Здравствуйте!

Помогите, пожалуйста, с выравниванием по вертикали тега <p> в блоке подвала.

Первый абзац прижат к левой части с отступом 5пкс, а второй к правой части блока с отступом 5пкс и все это надо выровнять по вертикали.

<p id="address">Континент<br>

тел. 000 00000000, моб. 111 111111<br>

e-mail: <a class="link2" href="mailto:support@.ru">support@.ru</a></p>

</div>

Спасибо тем, кто поможет в этом вопросе!

psywalker · December 16, 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%;}
		#viravnivanie_out{
			display: table;
			height: 100%;
		}
		#all{
			display: table-cell;
			vertical-align: middle;
		}
		* html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
		*+html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
	</style>
</head>
<body>
	<div id="viravnivanie_out">
		<div id="all">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur condimentum Curabitur mauris. Commodo Aenean tellus consequat eu Vivamus Aliquam semper senectus scelerisque et. Nibh a.</p>
			<p>Accumsan Nunc ipsum nonummy Aenean Pellentesque Donec est Pellentesque adipiscing sem. Augue vitae porttitor vel Curabitur ridiculus Sed semper risus libero neque. Congue.</p>
		</div>
	</div>

</body>
</html>

Triumfator · December 16, 2009

Спасибо большое, но что-то не выходит.

Вообще какая ситуация, верстка (шапка, два столбца паралельных и подвал). Так вот в блоке подвала Копирайт и контактные данные должны быть разнесены по двум сторонам блока в тегах <p>.

Именно это можете помочь сделать.

psywalker · December 16, 2009

Спасибо большое, но что-то не выходит.
Вообще какая ситуация, верстка (шапка, два столбца паралельных и подвал). Так вот в блоке подвала Копирайт и контактные данные должны быть разнесены по двум сторонам блока в тегах <p>.
Именно это можете помочь сделать.

А ты раздели на два дива, их в нужное стороны зафлоать, а в них уже по абзацу и ему уже выравнивание вертикальное.

Triumfator · December 16, 2009

А ты раздели на два дива, их в нужное стороны зафлоать, а в них уже по абзацу и ему уже выравнивание вертикальное.

Так пытался сделать до этого, но вопрос в том, тогда встает вопрос дивы отцентрировать по вертикале в диве. И с другой стороны, зачем плодить дополнительные блоки если должно как-то решаться таким образом. Видел раньше, что так делают (где конкретно не помню уже), но css же не могу увидеть, что прописано для <p> и для родительского.

psywalker · December 16, 2009

Так пытался сделать до этого, но вопрос в том, тогда встает вопрос дивы отцентрировать по вертикале в диве. И с другой стороны, зачем плодить дополнительные блоки если должно как-то решаться таким образом. Видел раньше, что так делают (где конкретно не помню уже), но css же не могу увидеть, что прописано для <p> и для родительского.

А покажи мне скрин того, что хочешь получить с подробным объяснением

Triumfator · December 16, 2009

А покажи мне скрин того, что хочешь получить с подробным объяснением

Ну что тут объяснить, в нижнем блоке хочу разместить копирайт и контактную информацию в тегах <p>, как указано на макете.

Edited December 16, 2009 by Triumfator

psywalker · December 16, 2009

Вставь вот этот код в браузер, зацени http://www.psywalker.ru/Forum/Vertical-line/Untitled-2.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; }
		body,html { height: 100%;}
		#viravnivanie_out{
			display: table;
			height: 200px;
			width: 100%;
		}
		#all{
			border: 1px solid #000;
			display: table-cell;
			vertical-align: middle;
			height: 200px;

		}
		* html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
		*+html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
	</style>
</head>
<body>
	<div id="viravnivanie_out">

		<div id="all">

			<div class="" style="float: left; width: 300px;">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur condimentum Curabitur mauris. Commodo Aenean tellus consequat eu Vivamus Aliquam semper senectus scelerisque et. Nibh a.</p>
</div>

		</div>
		<div id="all">
			<div class="" style="float: right; width: 300px;">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur condimentum Curabitur mauris. Commodo Aenean tellus consequat eu Vivamus Aliquam semper senectus scelerisque et. Nibh a.</p>
</div>
		</div>
	</div>

</body>
</html>

Triumfator · December 20, 2009

Спасибо тебе большое! Сделал, да результат тот, но меня отговорили делать скриптом такую простую вещь как центрирование. Тем более, что речь идет не о всем интефейсе веб-сайта, а лишь о копирайте в подвале. Поэтому реализуем вставленной в див таблицей, так будет возможность беспроблемно вставить какие-либо элементы в будущем без лишнего гемороя.

psywalker · December 20, 2009

Спасибо тебе большое! Сделал, да результат тот, но меня отговорили делать скриптом такую простую вещь как центрирование. Тем более, что речь идет не о всем интефейсе веб-сайта, а лишь о копирайте в подвале. Поэтому реализуем вставленной в див таблицей, так будет возможность беспроблемно вставить какие-либо элементы в будущем без лишнего гемороя.

Пожалуйста дружище, рад был помочь

Sign In

Выравнивание <p> по вертикали в подвале <div>

Question

Triumfator

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Triumfator

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Triumfator

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Triumfator

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Triumfator

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information