Как выровнять блочный элемент по центру страницы
Все мы знаем, как выровнять таблицу по центру. Просто впишите в тег 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).
Комментарии к статье