Форум Flasher.ru - div по центру страницы

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - div по центру страницы (http://www.flasher.ru/forum/showthread.php?t=153473)

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

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

Пользуйся:

Код:

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

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

Цитата:

Сообщение от uchenik12345 (Сообщение 986227)

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

Цитата:

Сообщение от uchenik12345 (Сообщение 986239)

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

Добрый коп: Нарисуй схему страницы целиком... потому что "на словах" у тебя выходит каша какая-то ;)
Злой коп: Пример, который тебе привели, весьма наглядно демонстрирует саму суть выравнивания. А верстать за тебя никто не будет.

Пожалуйста:

Код:

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

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

Код:

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