Горизонтальное центрирование фиксированных сайтов

Иллюстрация к статье «Горизонтальное центрирование фиксированных сайтов»

Одна из самых очевидных вещей, которая должна присутствовать в чек-листах перед запуском сайта у каждого разработчика — это горизонтальное выравнивание сайта фиксированной ширины в браузере. Даже не думал что буду писать об этом в блоге, но тем не менее проблема встречается.

В последнее время, разрешение мониторов у пользователей растёт быстрее, чем увеличивается и принимается за стандарт ширина фиксированных сайтов. И если сейчас её принято верстать под 1024 px, реже под 1280 px, то большой процент пользователей уже сидит на разрешениях экрана от 1440 px и выше. Сейчас уже никого не удивишь домашним монитором в 20-22-24 дюйма.

Обычно пользователь сидит прямо перед монитором и смотрит в центр экрана, а сайты «прибитые» к левому или к правому (да, видел и такие), оставляют не очень хорошее впечатление. Приходится увеличивать шрифт, чтобы прочитать, что же там скрывается в «отдалённых районах», смещать голову ближе к краю монитора и делать прочие ненужные телодвижения для работы с сайтом.

Особенно это заметно в блогах, где много интересного контента, но читать его так, как предлагает автор довольно проблематично или просто неудобно. Длинная лента текста в несколько экранов, смещённая от центра в сторону уменьшает скорость чтения. Для таких случаев я даже сделал свой reader.css, и периодически приходится его подключать к проблемным сайтам вместо стандартных стилей.

Отсюда несколько наглядных картинок для примера:

Левое неправильное выравнивание сайта»

Правое неправильное выравнивание сайта»

Нормальное выравнивание сайта»

Вывод один: чем больше разрешение экрана у пользователя, тем больше неудобств он испытывает при просмотре нецентрированных страниц.

Для полноты статьи и её практической ценности вот ссылка на методы CSS-выравнивания. Какой из них выбрать, решать вам. Я предпочитаю первый, с небольшим ухищрением для IE6.

P.S.: Для тех, кто утверждает, что «для работы не нужно разворачивать браузер на весь 2x-дюймовый экран». Согласен. Для работы. Но, как показывают личные наблюдения, пользователи предпочитают не экономить место, если просто серфят для удовольствия.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 17

  1. Steward, 20.08.2009 в 17:20

    Ну не знаю... margin:0px auto; для div-а с контентом ещё ни разу не подвёл...

    даже не представляю зачем остальные способы, особенно с отрицательным margin — всё равно что чесать правой рукой левое ухо — вроде и реально, но нафига если есть левая рука (всякие физические отклонения не рассматриваем)?

    Ответить

  2. rotor, 20.08.2009 в 17:40

    margin: 0 auto; — непонятная для IE6 инструкция. Остальное — просто, как возможные способы центрирования.

    Ответить

  3. Владимир Котельников, 20.08.2009 в 18:48

    У способа с отрицательным маргином есть баг: если сайт не влезает по ширине в окно браузера, горизонтальный скролл не появляется. Я в свое время пересел отрицательного маргина на первый способ как более надежный.

    Ответить

  4. ioni, 20.08.2009 в 19:44

    Сдвоенный способ — центрирование для IE и margin: auto для всех пока меня не подводил :)

    Ответить

  5. Сергей, 21.08.2009 в 12:08

    IE6 понимает margin: 0 auto;. Не понимают ИЕ5.5 и ниже...

    Ответить

  6. Octane, 21.08.2009 в 14:45

    А что там с IE6 и margin: 0 auto; не так?

    Ответить

    • @ Klim, 30.04.2010 в 12:32

      На IE 6 можно уже не ориентроваться — он постепенно отживвает свои срок)

      Ответить

  7. rotor, 23.08.2009 в 12:53

    Тут c IE6 (возможно что и 7, 8, не проверял правда) такое дело, что если включен Quirks Mode, то значения auto он не понимает. Для правильной работы нужен режим совместимости.

    Подробнее тут — haslayout.net/css/No-Auto...enter-Pseudo-Bug

    @Octane, а за что тебя Akismet не любит?

    Ответить

  8. Octane, 23.08.2009 в 14:54

    >> @Octane, а за что тебя Akismet не любит?

    Не знаю, наверное, раньше указывал другой E-mail или сайт в комментариях на этом блоге.

    Ответить

  9. @ Аттракти, 30.12.2009 в 23:07

    Пользователи с Востока будут приятно удивлены сайтами прижатыми к правой части экрана)

    Всем успехов в новом году!

    Ответить

  10. maya, 10.04.2010 в 10:03

    Информация на сайте должна растягиваться! делать статичные скриншоты легче, но такие сайты не удобные.

    Ответить

  11. @ max, 13.05.2010 в 0:35

    а чего это яндекс с гуглом стали к левому краю прижиматься при выдаче и не растягиваютя теперь как раньше?

    Ответить

  12. htmleater, 08.09.2010 в 16:01

    Статистика Рунета (рустат) за июль 2010 гола гласит, что пользователей с разрешением монитора > 1024 около 40 %

    Инфа к размышлению.

    Ответить

  13. Ametist, 23.03.2011 в 15:24

    А если, например, для Joomla изначально устанавливать резиновый шаблон, который подстраивается под монитор. Такое возможно?

    Ответить

  14. Виталий, 29.09.2011 в 14:06

    Сейчас лучше делать универсальные сайты или использовать шаблоны, чтобы всем подходили или хотябы большинству пользователей...

    Ответить

  15. infographic, 21.05.2012 в 18:49

    >IE6 понимает margin: 0 auto;. Не понимают ИЕ5.5 и ниже...

    Зачем вообще ориентировать нормальные сайты на такое старье то?

    Ответить

  16. Екатерина, 07.11.2013 в 11:10

    Да, ещё лучше сразу делать сайт по ширине экрана. Чтобы подходил по ширине к монитору ноутбука.

    Ответить

Есть что сказать?