позиционирование div'a

Rohanx · №1

Проблемма в том что FireFox2.0 не позиционирует правильно сайт (сайт смещается в левую сторону) в то время как IE отображает сайт строго по центру

Выделить код

Код:

.site 					{
					text-align: center;
					}

Выделить код

Код:

<div class="site">
<div class="site_or">

chaos8 · №2

text-align не отвечает за позиционирование div'а, ибо div есть блочный элемент и text-align на него не должен влиять. можно поэкспериментировать с margin: 0 auto; хотя IE это крайне плохо переваривает. будет работать неверно (если считаться со стандартами). text-align сам за себя говорит, что это выравнивает текст.

и советую перечитать спецификацию css2

Al_H · №3

Rohanx
Дело в том, что по стандартам text-align отвечает именно за позиционирование текста и некоторых замещаемых элементов (картинок) внутри блоков. И сделано это вот зачем. Предположим, у Вас есть несколько блоков, наследующих свойство text-align, и Вы задаете центрирование текста в родительском блоке. Тогда, независимо от ширины блоков и их положения внутри родительского, во всех в них текст будет центрирован. Точно так же Вы можете задать режим justify, и это не значит, что дочерние блоки будут жаться по стеночке.
Стандартный способ выравнивать блоки внутри родительских вытекает из определения полей. У полей есть значения по умолчанию. Если два блока 100% ширины (а точнее, ширины auto) располагаются друг в друге, margin-left будет по умолчанию 0, а margin-right будет auto, что в данном случае аналогично нулю. Если внутренний блок будет уже, чем внешний, это будет значить выравнивание по левому краю. Давайте посмотрим, что будет, если мы зададим другие значения, отличные от значений по умолчанию:

Выделить код

Код:

div.innerBlock {margin-left: auto; margin-right: 0; width: 100px;}
<div class="outerBlock">
    <div class="innerBlock">
        ...
    </div>
</div>

Теперь внутренний блок выравнивается по правому краю.
Аналогично делается центрирование:

Выделить код

Код:

div.innerBlock {margin-left: auto; margin-right: auto; width: 100px;}

Теперь попробуем сделать общий код, который работает и в современных браузерах - Firefox, Opera, Konqueror, Safari, не понимающих некорректный способ, и в браузере IE, не понимающем стандартный, и при этом учитывает наследование свойств и не смущает валидаторы.

Выделить код

Код:

div.outerBlock {text-align: center;}
div.innerBlock {margin-left: auto; margin-right: auto; width: 100px; text-align: left;}
<div class="outerBlock">
    <div class="innerBlock">
        ...
    </div>
</div>

Здесь для тупого IE задается text-align: center; что современные браузеры воспринимают как директивы для текста, и чтобы текст во внутреннем блоке не центрировался, для него задается text-align: left; , для современных же браузеров центрирование выполняется через поля внутреннего блока.

Al_H · №4

P.S. Старайтесь не использовать знак подчеркивания _ в именах классов, потому что с ним могут быть проблемы в некоторых браузерах. Некоторые браузеры воспринимают такие классы исключительно через \_ в то время как другие считают эту конструкцию ошибкой. В IE некоторых версий классы с подчеркиванием вообще не работают, но не любые, а только в некоторых случаях. Систему тут найти так и не удалось.

Rohanx · №5

все спасибо за разъяснения!

thebazel · №6

Выравнивание с помощью margin: auto; подходит только для не плавающих блоков. Если блоки или блоки имеет свойство float left или right, то подойдет метод выравнивания блоков по центру со свойством float.

Lynn · №7

thebazel
:mad: Что за некрофилия?

petrovich · №8

text-align: center можно для body задать, чтоб дивы не плодить.

upd:
И в IE6 нет проблемы такой, вроде, только в IE5.5 и ранее. Или ошибаюсь?

Отредактировано petrovich (19-06-2010 09:42:43)

Полезная информация

№117-11-2006 18:27:57