div по центру страницы

uchenik12345 · 03.04.2011, 15:55

Есть див НЕфиксированной ширины со всяким текстовым контентом.
Надо его расположить горизонтально по центру.
Что то типа:
margin:0 auto 0 auto; только ширина не задается (зависит от количества текста).
или position:absolute; left:50%; margin-left:-(ширина дива/2)px.
Таблицей сделать просто, но как сделать дивами?

Zebestov · 03.04.2011, 16:48

Пользуйся:

Код:

<!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">
	#container {
		text-align: center;
	}
	.content {
		display: inline-block;
		text-align: left;
		
		/* следующие три строки к делу отношения не имеют */
		margin: 5px;
		padding: 5px;
		border: 1px dashed #e0e0e0;
	}
</style>
</head>

<body>
<div id="container">
	<p class="content">
		Какой-то текст.
	</p>
	<br />
	<p class="content">
		Какой-то другой текст.
	</p>
	<br />
	<p class="content">
		А вот еще какой-то текст длиннее предыдущих двух.<br />
		Да еще и спокойно выравнивается по left.
	</p>
</div>
</body>
</html>

uchenik12345 · 03.04.2011, 16:55

А если в контейнере к тому же дивы с float:left?

Zebestov · 03.04.2011, 17:13

Цитата:

Сообщение от uchenik12345

Есть див ... со всяким текстовым контентом.

Цитата:

Сообщение от uchenik12345

А если в контейнере к тому же дивы с float:left?

Добрый коп: Нарисуй схему страницы целиком... потому что "на словах" у тебя выходит каша какая-то

Злой коп: Пример, который тебе привели, весьма наглядно демонстрирует саму суть выравнивания. А верстать за тебя никто не будет.

uchenik12345 · 03.04.2011, 18:22

Пожалуйста:

Код:

<!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>
<style type="text/css">
	#container { /*??? типа margin:0 auto 0 auto если бы был width*/ }
	#container div {float:left; border-right:1px solid #ff0000; margin:0 15px 0 0; padding:0 15px 0 0;}
        #container div.last {border-right:none; margin:0; padding:0;}
</style>
</head>

<body>
<div id="container">
	<div>text1</div>
        <div>text2</div>
        <div class="last">text3</div>
</div>
</body>
</html>

В данном примере суть выравнивания на text-align, который при использовании дивов не годится.
Заменять дивы на спаны не надо, (конкретно здесь бы заработало), но в целом это не решает проблему. Надо чтоб идейно работало бы будто float:center. Со все равно каким наполнением #container.

Zebestov · 03.04.2011, 18:49

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

Код:

<!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">
	/* вся магия в этих двух строках */
	#agospadi { text-align: center; }
	#container { display: inline-block; }
	/* все... волшебство закончилось */

	#container div { float: left; border-right: 1px solid #ff0000; margin: 0 15px 0 0; padding: 0 15px 0 0; }
	#container div.last { border-right: none; margin: 0; padding: 0; }
</style>
</head>

<body>
<div id="agospadi">
	<div id="container">
		<div>text1</div>
		<div>text2</div>
		<div class="last">text3</div>
	</div>
</div>
</body>
</html>