smartie
Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mistake2
o Решение на основе отрицательных полей
Сначала создаем контейнер, абсолютно позиционируем его и задаем отступ от левой границы - 50 процентов. В результате левое поле объемлющего блока будет начинаться в середине страницы.
Затем левому полю контейнера присваивается отрицательное значение, равное половине ширины объемлющего элемента. В итоге объемлющий блок располагается точно по центру.
пример:
Код:
#container {
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
} |
Ловкость рук и никакого мошенничества! Хотя этот метод нельзя назвать предпочтительнвм, но в качестве обходного пути он годится и поддержан очень широко. Даже Netscape 4.x поддерживает эту технику, поэтому она оказывается исключительно полезной, если дизайн должен работать с максимально большим числом разных браузеров.
Другие способы:
о центрирование с помощью автоматически устанавливаемых полей
предпочтительный способ центрирования любого элемента по горизонтали - это использование свойства margin, значения left и right которого зажаются равными auto. Чтобы этот способ сработал, необходимо создать объемлющий div. При этом обязательна должна быть задана его ширина.
пример:
Код:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
|
Поддержка: Safari 1.2, Opera 6.0, 7.0 for Win and Mac, Netscape 6.x+, Mozilla, Mozilla Firefox, IE 5.2 Mac, IE 6.0 (режим совместимости)
несмотря на неадекватную поддержку, многие дизайнеры пропагандируют использование именно этого приема всюду, где возможно, поскольку его можно считать стандартизированным методом горизонтального центрирования.
о центрирование с помощью свойства text-align
создав div, необходимые для макета, вы применяете свойство text-align следующим образом (это, конечно, отъявленное мошенничество, но оно работает во многих браузерах, так что трюк можно взять на вооружение):
Код:
body {
text-align: center;
}
|
в чем же здесь проблема? а в том, что и все потомки body будут центрироваться.
а значит, придетсяписать дополнительные правила для корректировки и восстановления стандартного отображения текста.
как вы понимаетет, это не слишком удобно. кроме того, по-настоящему совместимые со стандартом браузеры не будут выравнивать контейнер, только текст.
о сочетание задания полей с выравниванием текста
объединение двух предыдущих подходов |
