Открыть меню    

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

Все мы знаем, как выровнять таблицу по центру. Просто впишите в тег table следующий атрибут: align="center". Далее я опишу несколько способов, как можно выровнять блок (div) по центру страницы.

Тег <center>

HTML

<center>
<div class="dnzl">Какой-либо контент…</div>
</center>

Тег <center> выравнивает все свое содержимое (включая блоки div) по центру страницы, причем содержание блоков также будет отцентрировано. По-прежнему большинство браузеров разрешает использовать тег <center>, однако в настоящее время этот тег не рекомендован к использованию.

Атрибут align

HTML

<div class="dnzl" align="center">
<div>
Место для какого-либо контента…
</div>
</div>

Блоки, заключенные в тег div с атрибутом align=center, выравниваются по центру страницы. Атрибут align не рекомендован к использованию. Примечательно, что содержимое отцентрированных блоков тоже центрируется.

Свойства css

HTML+CSS

<div class="dnzl">Какой-либо контент….</div>
 
<style type="text/css">
.dnzl{
width:500px;
border:1px solid #666666;
margin: 0, auto;
}
</style>

Используя вышестоящий стиль, вы сможете выровнять блок по центру. Как видно, блок центрируется из-за того, что левому и правому полю (margin) назначается значение auto, благодаря этому значению поля автоматически заполняют пространство за блоком и центрируют его. Вы можете изменять значения верхнего и нижнего поля по своему усмотрению, это никак не скажется на центрировании блока. Этот метод считается оптимальным и поддерживается практически всеми браузерами (может быть за исключением ie6).

Комментарии к статье