Выравнивание — div блок по центру

Выравнивание — div блок по центру

Есть несколько правильных способов расположить div по центру. В данной статье будет описано три, наиболее распространенных.

Первыми двумя пользуются те, кто хочет добиться правильного отображения в старых браузерах, третьим способом пользуются те, кто хочет просто выровнять div блок по центру.

Способ выравнивания №1 — не универсальный:



Минусы:

  • используется абсолютное позиционирование, что влияет на общую картину и потребуется использовать дополнительный внешний блок;
  • надо считать чему равна половина блока.

Способ выравнивания №2 — старинный:



Минусы:

  • Необходимо использовать дополнительный внешний блок;
  • Необходимо использовать внешний вспомогательный блок, нейтрализующий влияние свойства float;
  • Дополнительный блок может испортить внешний вид.

Способ выравнивания №3 — лучший:



В данном примере минусов нет. Все аккуратно и быстро. Может возникнуть резонный вопрос —  что делать, если не известна ширина блока но надо расположить div блок по центру?

Все просто — нужно добавить свойство display: table; и проблема будет решена. Этот способ подходит, чтобы расположить любой div блок по центру, будь то меню, блок с контентом, изображение в виде блока и т.п.

Пример: — div блок по центру с использованием всех способов:



Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

"Выравнивание — div блок по центру"

Вам будет интересно...

Добавить комментарий