Подписка
Email
Fb
RSS
Twitter
Email

Выравнивание страницы сайта по центру

Здравствуйте, посетители блога DenWeb.Ru. Почти всегда при верстке бывает нужно сделать так, чтобы страница сайта, в случае если ее ширина будет меньше разрешения экрана, выравнивалась по центру. Как это сделать?

Выравнивание страницы по ширине браузера дело не сложное. Для этого используем следующий метод:

HTML:

<html>
  <head>
  </head>
  <body>
    <div id="wrapper">Содержание сайта</div>
  </body>
</html>

CSS:

* {margin: 0; padding: 0;}
body {
	text-align: center;
}
#wrapper {
	width: 800px;
	margin: 0 auto;
}

Мы создаем блок div с идентификатором wrapper с шириной к примеру 800px, который является «оберткой» для всего содержимого страницы.

В начале обнуляем все отступы — * {margin: 0; padding: 0} . У body прописываем свойство text-align: center, для выравнивания его содержимого по центру. А для блока wrapper задаем свойство margin: 0 auto, которое и выравнивает его по центру.

Таким способом можно выровнять любой другой элемент.

Вы можете оставить комментарий.

8 комментариев к записи “Выравнивание страницы сайта по центру”

  1. Сергей:

    Спасибо! К сожалению работает только в EI но не работает для Хрома и FF. Подскажите, как сделать унифицированный для всех браузеров алгоритм

  2. Спасибо, дорогой!Уроки суппер, все по делу, все в тему.Такой грамотно сделанной инфы и за деньги редко купишь. Здорово помог.

  3. кэп:

    text-align: center в нормальных браузерах выравнивает только текст в диве(собственно, для этого это свойство и предназначено. ваш кэп). Но в ИЕ выравнивается и див. Так что пример работает только в ИЕ. Правильно делать врапу width:800px; left: 50%; margin-left:-400px;

  4. Артем:

    Спасибо вещь простая но уже голову сломал как отпозиционировать сайт)) из разряда «не работает компьютер? Включи его в розетку»)))

  5. Юрий:

    Спасибо! Все отлично работает. Вообще сайт во многом очень полезный. Удачи и успехов автору!

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

Spam Protection by WP-SpamFree

Яндекс.Метрика