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

Общаясь на разных форумах, обратил внимание, как некоторые люди тяжело переходят на 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;}

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