Нонче тут

Сейчас 21 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

В этой статье я расскажу, как выровнять блок div по центру.Способов существует масса, но далеко не все позволяют выровнять div валидно. Я приведу в пример самые удачные и простые способы.

Для начала вспомним о margin- свойстве для установки ширины полей сразу для всех сторон элемента.

Число значений Описание записи
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Способ 1. С auto

margin:0 auto;

Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. Всё просто, как угол дома. Имеется блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру.

margin:10px auto;

Для выравнивания сверху и снизу:

margin:10px auto 5px;

Способ 2. С %%

Имеем блок шириной 60%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 20% справа и слева соответственно. Смотрим код:

#bl2 {
  margin:0 20% 0 20%;
  width:60%;
}

Не парясь особо, получаем блок по центру, выровненный школьной математикой (60 + 20 + 20)- угадали сколько будет?

Способ 3. С позиционированием (ишак 7 нас тут может подвести, ибо отрицательных значений не ест)

#bl3{
  left: 50%;
  margin-left: -500px;
  position: absolute;
  width: 1000px;
}

Способ 4. Использование дополнительного блока (подсмотрен где-то на просторах инета)

Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

В таких случаях используют дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:

#dop-block{
    position: relative;
    float: right;
    right: 50%;
}
#block{
    position: relative;
    float: left;
    left: 50%;
}
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.