Контент по центру, фон по ширине

Эта статья для студентов базового и продвинутого курсов по вёрстке в HTML Academy.

Частая задача вёрстки — центрировать контент, а фоны растягивать:

Сайт на мобильных, планшетах и компьютерах. Контент по центру, фон тянется

Фон у шапки, у плашки под шапкой, фон с травой, серый фон и фон подвала тянутся на всю ширину. Текст на мобильных отодвинут от краёв на 20px, на планшетах на 40px, а на десктопе занимает 900px и находится по центру. Большинство адаптивных сайтов сделано именно так:

  • фон всегда по ширине страницы;
  • на мобильных и планшетах есть отступы у контента (могут быть как в пикселях, так и в процентах);
  • есть максимальная ширина, больше контент не должен быть.

Как это сделать? Если фон по ширине, то это фон какого-то блока, который тянется на всю ширину. Возьмём шапку. На мобильных и планшетах можно так:

See the Pen content-center-mobile.

На мобильных просто добавим паддинги. Посмотрите HTML и CSS в примере

Но как на десктопе сделать, чтобы контент не выходил за 900px? Паддинги уже не подойдут. Если ограничить header по ширине, то фон перестанет тянуться. Обернём содержимое шапки и ограничим обёртку. Расположим её по центру:

See the Pen content-center-desktop.

Для наглядности ограничу 500px

К header-wrapper добавится content-wrapper, footer-wraper и прочие врапперы. Поэтому я сразу делаю один блок — wrapper. Который только центрует контент. Больше ничего. Вот как:

  • Отступы на мобильных;
  • отступы побольше на планшетах;
  • максимальная ширина и центровка марджинами.

See the Pen content-center-final.

На мобильных тянется. Ограничен по ширине, центруется

У вас сложная вёрстка, поэтому на мобильных и планшетах вы делаете фиксированную ширину? Не вопрос, просто зафиксируйте ширину на всех контрольных точках:

See the Pen content-center-fixed.

В Бутстрапе тоже есть блок, который центрует контент: container.

С любовью, ваш Капитан.

Поделиться
Отправить