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

196

loed

27 декабря 2009, 21:02

19286

Подскажите, измучился, как выровнять по центру дивы 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="lob">Текст + картинка</div>

</div>

46

ixRock

28 декабря 2009, 03:38

#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

39

jegx0a

28 декабря 2009, 06:05

#2

Жесть:

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

</div>

</center>

Зарабатываю тут (http://www.setlinks.ru/?pid=17004).

76

PyMbIH

28 декабря 2009, 09:26

#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 class="lob" align="center">Текст + картинка</div>

</div>

либо в такой:

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

</center>

</div>

196

loed

28 декабря 2009, 09:59

#4

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

76

PyMbIH

28 декабря 2009, 10:24

#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 class="lob">Текст + картинка</div>

</div>

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

S

60

Supervisork

28 декабря 2009, 11:28

#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="lob">Текст + картинка</div>

</div>

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

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

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

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ