• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
УРОКИ 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