Горизонтальное выравнивание по центру

Четверг, 19 Июль, 2007

Общаясь на разных форумах, обратил внимание, как некоторые люди тяжело переходят на CSS. Казалось бы, что проще — сесть и два дня провести за спецификацией (ну, или чуть больше). Нет же, прикручивают устаревшие атрибуты тэгам, которые кроме полезного эффекта, превращают код с нечитаемую напалмовую смесь – и html тут, и css тут, и скриптов всяких разных (сидите, разбирайтесь, что я натворил).

Как правило, мало внимания верстке уделяют web-программисты. Их можно понять, какой еще html+css, когда нужно укладываться в сроки с программированием. Заказчики же, обычно, люди тёмные и «лишнюю работу» оплачивать не любят. Вот и приходится беднягам выкручиваться без помощи верстальщиков.

А рассказать именно о горизонтальном выравнивании решил после того, как один гражданин посоветовал использовать атрибут:

align=”center”

… и это уже после того, как был дан правильный ответ. То есть гражданин просто уверен, что решение есть, а что за решение – его крайне мало интересует, поэтому он даже не удосужился прочитать, что писали собеседники выше.

Обратиться хотелось бы, в общем-то, к самому простому и изящному решению: блоку, который требуется выровнять, присваиваются отступы:

margin: 0 auto;

Т.е. полный код выглядит так:

<div style=»margin:0 auto;»>Горизонтальное выравнивание по центру</div>

Код проверялся со следующими DOCTYPE:

Соответственно, такой код:

… будет выглядеть так:

Сложность, которая возникает в случае использования подобной записи отступов, в ограничении верхнего и нижнего отступа нулем. Но и это, по большому счету, не такая уж великая проблема. Решается она заданием верхнего и нижнего внутреннего отступа (padding) для внешнего блока. В нашем случае – для body:

CSS: body {padding:40px 0px;}

Таким образом мы имеем почти универсальное решение для горизонтального выравнивания по центру. Все исключения можно видеть в уже указанной таблице.

Реклама

Один ответ to “Горизонтальное выравнивание по центру”

  1. Anton Says:

    спасибо! век живи — век учись!


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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: