|
CSS Урок 21 Выранивание
В CSS несколько свойств используются для выравнивания элементов по горизонтали
Выравнивание Блочных ЭлементовБлочный элемент - это элемент, который занимает всю доступную ширину и имеет
переносы строк до и после себя.
Примеры блочных элементов:
По выраниванию текста, смотрите
CSS Урок 6 Текст.
В этом уроке, мы вам покажем как выравнивать блочные элементы по горизонтали для целей
компоновки.
Выравнивание по Центру Используя Свойство marginБлочные элементы могут быть выровнены с помощью установки полей left (левого) и right (правого) в значение
"auto".
Замечание: Использование margin:auto не будет работать в IE8 и более ранних версиях, пока не объявлен !DOCTYPE.
Установка полей left и right в auto указывает, что они должны распределить доступные поля одинаково.
В результате получаем отцентрированный элемент:
Пример.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Совет: Выравнивание не возымеет эффекта, если ширина равна 100%.
Замечание: В IE5 есть баг по обработке полей блочных элементов.
Чтобы заставить пример выше работать и в IE5, добавьте дополнительный код:
пример
Левое и Правое Выравнивание с Использованием Свойства positionОдин из методов выравнивания элементов - использование абсолютного позиционирования:
Пример.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Замечание: Абсолютно позиционированные элементы удаляются из стандартного
потока и могут перекрывать с другие элементы.
Проблемы Кроссбраузерной Совместимости
При выравнивании элементов подобным образом, всегда хорошей идеей будет предопределить
поля и отступы для элемента <body>. Это делается, чтобы избежать визуальных различий в разных
браузерах.
Существует проблема в IE8 и более ранних версиях при использовании свойства position.
Если элемент-контейнер (в нашем случае <div class="container">) имеет указанную ширину,
а объявление !DOCTYPE отсутствует, IE8 и более ранние версии добавляют поле в 17px с правой стороны.
Это, по видимому, пространство для полосы прокрутки. Всегда устанавливайте объявление !DOCTYPE
при использовании свойства position:
Примерbody
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Левое и Правое Выравнивание с Использованием Свойства float
Еще один способ выравнивания элементов - использование свойства float:
Пример.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Проблемы Кроссбраузерной Совместимости
При выравнивании элементов подобным образом, всегда следует указывать предопределенные
поля и отступы для элемента <body>. Это необходимо, чтобы избежать визуальных различий в разных
браузерах.
Существует проблема в IE8 и более ранних версиях при использовании свойства float.
Если объявление !DOCTYPE пропущено, IE8 и более ранние версии добавят поле в 17px с правой стороны.
Это, по видимому, пространство зарезервированное для полосы прокрутки. Всегда устанавливайте объявление !DOCTYPE
при использовании свойства float:
Примерbody
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
|
