Закажи “Сайт под ключ” и получи

в подарок:

  • Домен !
  • Хостинг !
  • 10% скидки на следующий заказ !

Статьи

Учимся выравнивать div блоки по центру

Учимся выравнивать div блоки по центру

Хочу, рассказать сегодня о верстки div по центру. Любой, кто долгое время не верстал, не сразу вспомнит правила верстки. Но их вспомнить не так уж сложно, если просто «пошевелит мозгами». Многие после продолжительного отдыха, сев за компьютер, совершенно забывают, как размещать div по центру. Но открыв справочник по Html, открыв свои ранние веб проекты и поискав в просторах Интернета, можно найти ответ на этот простой, но популярный вопрос.

В верстке div по центру существует далеко не один способ выравнивания div блока по центру, поэтому разные веб-мастера, верстальщики используют свои, полюбившиеся и родные им способы. Самые популярные и универсальные способы мы сейчас рассмотрим. Естественно и рассмотрим валидный способ. Следует учесть, что эти способы могут быть не совместимыми в таких браузерах, как, например, Internet Explorer 6. Но, учитывая, что, все же, основная масса людей использует более «продвинутые» браузеры (Mozilla Firefox, Opera и т.п.), эта новость абсолютно не должна вас беспокоить.

Способы верстки div по центру

1-й способ верстке div по центру таков:

margin:0 auto;

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

Например, для выравнивания сверху, нужно написать margin:10px auto; Чтоб выровнять снизу и сверху напишите margin:10px auto 5px; Все приведенные выше, способы, являются полностью валидными, этот способ наилучший для выравнивания блоков по центру.

2-й способ. Этот метод процентной DIV верстки по центру. В случае, если ширина блока – в процентах, тогда можно выравнивать div по центру с помощью равных отступов, добившись полной ширины до 100 %. Рассмотрим подробнее:допустим, у нас блок с шириной в 50%. Для выравнивания его по центру, необходимо боковые отступы сделать по 25%, то есть слева и справа. Код таков будет:

#test2{ margin:0 25%;width:50%; }

Таким образом, у нас получился блок по центру, который был выровнен с помощью несложного уравнения: 50+25+25.

3-й способ DIV верстки по центру. Этот метод называют смешанным.

Выглядит код так:

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

Но, все же, как говорилось раннее, это не единственные способы выравнивать блоки по центру. Надеюсь, вы найдете свой, самый эффективный и удобный способ.

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