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

loed
На сайте с 10.03.2007
Offline
168
19275

Подскажите, измучился, как выровнять по центру дивы lob внутри дива osnova?

#osnova {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 15px;

width: 810px;

text-align:left;

float: left;

}

#lob {float:left;

width: 200px;

margin:15px;

text-align: center;

border:#e6e6e6 1px solid;

padding: 0px;

}

<div id="osnova">

<div id="lob">Текст + картинка</div>

<div id="lob">Текст + картинка</div>

<div id="lob">Текст + картинка</div>

</div>

ixRock
На сайте с 14.11.2006
Offline
46
#1

ну если у них будет float:left то никак)

нужно или обрамить их во внешний див с нужной шириной и поставить ему margin:auto

или лучше на эти блоки поставить display:inline-block, но в некоторых браузерах это не пашет, типа фф2.0 (кстати нельзя на странице использовать неск. элементов с одним и тем же id, но это к делу не относиться)

Работаю [S]за еду и секас[/S] с XHTML, CSS, XSLT, JS, PHP. Если что, вот тут (http://www.mintdesign.ru/) некоторые мои работы. Контакты: ася 344-ноль86-276, мыло ixrock@gmail.com
J0
На сайте с 13.05.2007
Offline
39
#2

Жесть:

<center>

<div style="width:810px">

<div id="osnova">

<div id="lob">Текст + картинка</div>

<div id="lob">Текст + картинка</div>

<div id="lob">Текст + картинка</div>

</div>

</div>

</center>

Зарабатываю тут (http://www.setlinks.ru/?pid=17004).
PyMbIH
На сайте с 22.11.2009
Offline
76
#3
ixRock:
ну если у них будет float:left то никак)

нужно или обрамить их во внешний див с нужной шириной и поставить ему margin:auto

или лучше на эти блоки поставить display:inline-block, но в некоторых браузерах это не пашет, типа фф2.0 (кстати нельзя на странице использовать неск. элементов с одним и тем же id, но это к делу не относиться)

Вот то что "кстати" играет огромную роль в правильной верстке страницы и отображении её в разных браузерах.

ТС, если Вы хотите сделать Все правильно, то делайте так:

#osnova {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 15px;

width: 810px;

text-align:left;

float: left;

}

.lob {

width: 200px;

margin:15px;

text-align: center;

border:#e6e6e6 1px solid;

padding: 0px;

}

А HTML код можно привести либо в такой вид

<div id="osnova">

<div class="lob" align="center">Текст + картинка</div>

<div class="lob" align="center">Текст + картинка</div>

<div class="lob" align="center">Текст + картинка</div>

</div>

либо в такой:

<div id="osnova">

<center>

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

</center>

</div>

loed
На сайте с 10.03.2007
Offline
168
#4

PyMbIH - как вы указали работает, но дивы lob должны идти в один ряд, те если добавить float:left; то по центру не получается

PyMbIH
На сайте с 22.11.2009
Offline
76
#5
loed:
PyMbIH - как вы указали работает, но дивы lob должны идти в один ряд, те если добавить float:left; то по центру не получается

Жаль не имею телепатических навыков, но есть предположение следующего порядка:

#osnova {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 15px;

width: 810px;

text-align:left;

float: left;

}

.lob {float: left;

width: 200px;

margin:15px;

text-align: center;

border:#e6e6e6 1px solid;

padding: 0px;

}

<div id="osnova">

<div align="center">

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

</div>

</div>

Попробуйте так... надеюсь это то, что Вам нужно. 🚬

S
На сайте с 27.02.2007
Offline
60
#6

ваще, align="center" - это утаревший атрибут. Если делать по науке, то опоясывающий блок с text-align:center, в нем блок с margin:auto, а дальше уже, как угодно. Не буду приводить конкретный код, потому что бесполезно делать выводы на утверждениях дилетантов. Смотришь код, судя по коду, они хотят одно, а когда начинаешь задавать вопросы, оказывается, что, хотят-то они совершенно другого. Если исходить из фразы "выровнять по центру дивы lob внутри дива osnova", которую я понял как необходимость выровнять блоки lob, занимающие ВСЮ ширину блока osnova, имеющего шируну 810 пикселей, то выглядит так:

.osnova {width: 810px;margin:0 auto;padding:0}

.all {width:100%;text-align:center}

<div class="all">

<div class="osnova">

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

<div class="lob">Текст + картинка</div>

</div>

</div>

То есть, блок osnova однозначно центрируется в любом браузере и находящимся в нем блокам lob деваться некуда.

Другие параметры блоков значения не имеют, конечно, если не задать им что-то типа обсалютного позиционирования или размеров больше, чем нужно. Учим матчасть

Создание сайтов, документация... (http://site3k.net/), сайт нашей дизайн-студии (http://website-it.ru/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий