Как выровнять HTML-блок по центру страницы

Наш постоянный читатель, и пользователь WordPress по совместительству, интересуется — как разместить блок по центру контейнера или страницы? И здесь имеется ввиду произвольный код, включая, но не ограничиваясь текстовым контентом. Например, это могут быть социальные виджеты или рекламный баннер, который следовало бы поместить по центру заданной области.

Итак, если для текста внутри контейнера достаточно указать CSS-параметры:

text-align: center;

То например для картинки, можно использовать CSS-класс:

class=”aligncenter ”

который заведён в системе по умолчанию.

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

<center>
//ваш_код_блока
</center>

при помощи тега «center» можно выровнять по центру практически любой элемент оформления на сайте. К тому же, он будет выполняться приоритетно относительно присвоенных CSS-стилей.

Если же блок заключён в теги «div» или ему подобные, то можно применить CSS-параметр внешнего отступа «margin». Укажите его для текущего стиля или имеющегося CSS-класса:

margin: 0 auto;

При этих значениях «margin» имеет нулевые отступы сверху и снизу, и равноудалён с боков. Но рекомендуем дополнить ещё одним атрибутом:

clear: both;

А этот параметр снимает все возможные обтекания с правой и левой сторон целевого блока, делая отображение на странице более аккуратным относительно других объектов.

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