Вы здесь:   Главная » Вебмастеру    »    Как выровнять HTML-блок по центру страницы

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

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

Как выровнять блок по центру контейнера с помощью CSS

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

text-align: center;

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

class=”aligncenter ”

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

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

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

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

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

margin: 0 auto;

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

clear: both;

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

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

поделиться с друзьями:

обновлено: 29.04.2017

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

Подписаться на почтовую рассылку*
*политика конфиденциальности Google

Оставить комментарий

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: