УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 21 Выранивание

« Назад Далее »

В CSS несколько свойств используются для выравнивания элементов по горизонтали

Выравнивание Блочных Элементов

Блочный элемент - это элемент, который занимает всю доступную ширину и имеет переносы строк до и после себя.

Примеры блочных элементов:

  • <h1>
  • <p>
  • <div>

По выраниванию текста, смотрите 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;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает



« Назад Далее »



© 2011 - 2022 Уроки CSS