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

🕛 19.01.2009, 19:28

По умолчанию ширина слоя принимает значение auto, и слой, как правило, занимает всю доступную ширину. Поэтому описанным методом по центру можно выровнять только такой слой, у которого явно задана ширина в процентах или пикселах. После чего к стилю слоя следует добавить отступ слева (стилевой атрибут margin-left) и справа (margin-right) со значением auto. Впрочем, также можно воспользоваться универсальным атрибутом margin со значением 0 auto. Первое значение задает нулевой отступ сверху и снизу от слоя, а второй - автоматический слева и справа (пример 1).

Пример 1. Выравнивание слоя по центру

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Выравнивание слоя по центру</title> <style type="text/css"> .center { width: 200px; /* Ширина слоя в пикселах */ padding: 10px; /* Поля вокруг текста */ margin: 0 auto; /* Выравниваем по центру */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div class="center"> Lorem ipsum dolor sit amet... </div> </body>
</html>