Как расположить элементы по центру
Как расположить ссылки так, чтобы они находились по центру? Я уже видел похожие вопросы и ответы на них, но там всё было запутанно. Хотелось бы увидеть несколько простых ответов на мой вопрос. Всё время я элементы позиционировал по центру с помощью calc()
a < text-decoration: none; >.btn < font-family: Roboto; font-style: normal; font-weight: 500; font-size: 20px; line-height: 16px; text-align: center; letter-spacing: 16.75px; text-transform: uppercase; border: 2px solid #242424; box-sizing: border-box; border-radius: 9px; transition: 0.3s; >._tg < position: absolute; padding: 25px 136px; left: calc(50% - 510px/2 - 0.5px); top: calc(50% - 75px/2 + 51.5px); background: #0F0F0F; color: #739084; >._twitch < position: absolute; padding: 25px 167px; left: calc(50% - 510px/2 - 0.5px); top: calc(50% - 5px/2 + 124px); background: #0F0F0F; color: #739084; >._vk < position: absolute; padding: 25px 122.6px; left: calc(50% - 510px/2 - 0.5px); top: calc(50% - 5px/2 + 233px); background: #0F0F0F; color: #739084; > telegram twitch vkontakte Отслеживать
задан 9 авг 2021 в 17:00
71 1 1 серебряный знак 6 6 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Используйте flex для этого. Вам нужно задать контейнеру для центрирования display: flex и justify-content: center; align-items: center; , а также разместите их в колонку, используя flex-direction .
a < text-decoration: none; margin-bottom: 10px; >.btns < display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; >.btn < font-family: Roboto; font-style: normal; font-weight: 500; font-size: 20px; line-height: 16px; text-align: center; letter-spacing: 16.75px; text-transform: uppercase; border: 2px solid #242424; box-sizing: border-box; border-radius: 9px; transition: 0.3s; padding: 15px 20px; width: 300px; box-sizing: border-box; text-align: center; >._tg < background: #0F0F0F; color: #739084; margin-top: 200px; >._twitch < background: #0F0F0F; color: #739084; >._vk
telegram twitch vkontakte Отслеживать
71 1 1 серебряный знак 6 6 бронзовых знаков
ответ дан 9 авг 2021 в 17:14
highpassion highpassion
1,816 1 1 золотой знак 6 6 серебряных знаков 18 18 бронзовых знаков
Как стилизовать wrapper в CSS
Контент сайта должен находиться в элементе, имеющем такую ширину, чтобы его было легко читать. Для достижения этого мы можем использовать то, что называется wrapper, обёртка или контейнер. Есть несколько способов использования обёртки в CSS, и все они могут вызвать некоторые затруднения.
В этой статье я объясню вам всё, что нужно знать о контейнерах в CSS: как они работают и как их использовать. Обратите внимание, в статье я могу употреблять термины wrapper, обёртка и контейнер, но все они означают одно и то же.
Готовы? Давайте разбираться!
Кратко о контейнерах
Когда вы слышите слово обёртка или контейнер – это буквально означает, что группа элементов обёрнута другим элементом или содержится в нём. Не используя дополнительные объекты, мы можем добавить обёртку к элементу , как показано ниже.
body
Однако добавлять wrapper к элементу в современных условиях было бы не очень практично. Контейнер не позволяет дочерним элементам выходить за его границы. Посмотрите на следующую фигуру:
У нас есть боковые и центральные элементы, которые существуют внутри другого элемента, оборачивающего их. Конечно, у элемента wrapper есть своя ширина.
Без контейнера дочерние элементы соприкасались бы с границами экрана. Это выглядело бы довольно раздражающе для пользователя, особенно на большом экране.
Фигура, продемонстрированная выше, показывает, что элементы растягиваются, если их ничто не оборачивает. Пользователю не стоит видеть такую картину. Давайте объясню, почему .
Почему страница должна иметь обёртку
Использование контейнера на странице даёт много преимуществ, о которых вы, как дизайнер или разработчик, должны знать. Вот некоторые из них:
- Контейнеры делают контент более читабельным. Без обёртки такой контент как текст или картинки может растянуться на полную ширину экрана. На маленьких экранах это может быть приемлемо, но на больших выглядит неприятно.
- Обертки группируют элементы так, что становится легче настраивать расстояние между ними.
- Без обертки было бы сложно разделить элементы дизайна на колонки.
Добавляем ширину
Первая вещь, о которой стоит подумать, создавая wrapper, – это его ширина. Насколько широким вы хотите его видеть? Это зависит от вашего дизайна. Как правило, чаще всего используется ширина контейнера в диапазоне 1000px – 1300px. Самый популярный фреймворк Bootstrap, например, использует ширину в 1170px.
.wrapper
Однако не рекомендуется использовать свойство width, так как из-за этого может появиться горизонтальная прокрутка экрана, если его размер меньше 1170px. Но вы можете от неё избавиться, добавив свойство max-width.
.wrapper
Это будет работать, но вы также можете убрать свойство width и использовать только max-width, как показано ниже:
.wrapper
Теперь, когда мы добавили контейнеру ширину, давайте расположим его в центре.
Центрирование контейнера
Чтобы разместить контейнер в центре, вы должны присвоить свойству margin значение auto с левой и правой стороны. Смотрите пример, приведенный ниже:
.wrapper
Согласно спецификации CSS, auto margin работает следующим образом:
Если свойствам margin-left и margin-right присвоено значение auto, то размер отступа с обеих сторон будет одинаковым. Это горизонтально центрирует объект, относительно краёв содержащего блока.
Я использовал параметр «margin: 0 auto», который сбрасывает значение margin сверху и снизу до нуля, а справа и слева устанавливает значение auto. Пользуясь этим способом, можно ожидать некоторых последствий, о которых я расскажу в этой статье чуть позже.
Пока что рекомендую установить значения margin вручную.
.wrapper
Добавляем padding слева и справа
Важно не забыть добавить padding с левой и правой стороны. Если размер окна просмотра меньше максимальной ширины контейнера, то края контейнера будут соприкасаться с границами окна просмотра.
.wrapper
Добавляя padding, мы можем быть уверены, что слева и справа будет отступ в 16px, даже если ширина окна просмотра меньше максимальной ширины контейнера.
Свойство padding действует как подстраховка, не допускающая прилегания границ контейнера к границам окна просмотра, в случае нехватки места.
Использование процентной ширины для контейнера
Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.
В случае использования этого метода, ширина, равная 90% от окна просмотра, будет слишком крупной на больших экранах. Это можно исправить, используя медиа-запросы.
.wrapper < max-width: 90%; margin-left: auto; margin-right: auto; >/* Медиа-запрос для большого экрана */ @media (min-width: 1170px) < .wrapper < max-width: 1170px; >>
Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.
.wrapper
Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.
Способ отображения контейнера
Так как контейнер – это , он по умолчанию является блочным элементом. Вопрос в том, что делать, если мы хотим, чтобы он отображался в виде сетки, и всё его содержимое располагалось на сетке?
Что ж, я бы не рекомендовал так делать, потому что это противоречит концепции разделения обязанностей. «Обёртка» оборачивает другие элементы, и на этом всё. Если вам нужен контейнер с сеткой, добавьте в существующий контейнер элемент со свойством display: grid. Это более простой, понятный и доступный способ.
Так делать не рекомендуется, потому что использование элемента wrapper на другой странице может случайно повредить вашу вёрстку.
.wrapper
Лучшим решением будет следующее:
.featured-news
Заметьте, что я добавил отдельный элемент , чтобы он содержал контент. Пожалуйста, не обращайте внимания на классы и соглашения по именованию в этом примере. Мы можем найти гораздо лучшее решение, создав названия классов, которые могут быть использованы повторно на разных страницах сайта. Однако соглашения по именованию выходят за рамки этой статьи.
Добавляем отступ между контейнерами
Помните, я не рекомендовал использовать сокращенную версию кода для центрирования контейнера? Я говорю об этой версии:
.wrapper
Она может привести к неполадкам, если на странице несколько контейнеров, и вы хотите добавить отступ между ними. Если вы зачем-то добавили другую вариацию класса к элементу wrapper, по определённым причинам у вас может не получиться добавить отступ.
.wrapper-variation < margin-top: 50px; >.wrapper
Свойство margin не будет работать для элемента wrapper-variation, потому что оно противоречит свойству margin: 0 auto. Сокращенное свойство будет отменять полное. Чтобы избежать подобной путаницы, в таких случаях рекомендуется использовать полные свойства.
Теперь давайте перейдём к созданию отступа. В каждом проекте я подготавливаю несколько служебных классов и использую их по необходимости. Обратите внимание на следующую модель:
Благодаря подобному подходу, сам контейнер остаётся без изменений, а отступ добавляется к дополнительным служебным классам в CSS. Теперь вы, наверное, спросите, зачем мне создавать несколько контейнеров на странице, если я могу создать один? В HTML-коде, приведенном выше, между двумя контейнерами есть элемент .
Здесь было бы полезно использовать декларацию !important, так как основная цель служебных классов в CSS, – сделать определенное свойство обязательным. Мы гарантируем это, добавляя !important.
Контейнер внутри полноэкранного раздела
Могут быть случаи, когда фон секции занимает 100% ширины окна просмотра, а внутри секции находится контейнер. Это похоже на то, что я показывал в предыдущем примере.
Структура HTML-страницы может выглядеть так:
Элемент занимает 100% ширины окна просмотра. Вы можете добавить к нему фоновый цвет или изображение. Внутри него контейнер не позволяет содержимому занять всю ширину окна просмотра.
На картинке, приведенной выше, у элемента есть фоновое изображение, которое занимает всю ширину окна просмотра. Контент внутри него ограничен шириной контейнера.
Нужен ли контейнер для первой секции?
Бывает по-разному. Давайте рассмотрим два наиболее часто используемых варианта дизайна первой секции (Hero Section).
В первом варианте содержимое располагается по центру и ограничивается определенной шириной.
Во втором варианте содержимое растягивается по ширине основного контейнера.
Чтобы лучше понять эти две модели, давайте разберёмся, как построить каждую из них.
Первая секция с контентом в центре
Возможно, вы не устоите перед соблазном разместить содержимое первой секции и центрировать всё без учета контейнера.
How to make bread at home
.
Sign up
Имея такой HTML-код, вы бы центрировали содержимое с помощью text-align.
.hero
Это будет выглядеть здорово до тех пор, пока вы не измените размер окна браузера. Вы можете столкнуться проблемами, рассматриваемыми далее.
Содержимое касается краёв
Так как padding справа и слева отсутствует, содержимое будет касаться краёв без каких-либо отступов. Это плохо для пользователя, ведь в подобной ситуации сложно просматривать и читать контент.
Слишком длинная строка на больших экранах
Будет очень сложно читать текст абзаца на больших экранах, так как строка слишком длинная. Сайт « Элементы типографического стиля, используемые в сети » рекомендует, чтобы в строке было 45-75 символов. Чем дальше от этого диапазона, тем сложнее будет читать текст, представленный на веб-странице.
Для устранения подобных проблем, можно использовать контейнер, который не даст строке текста стать слишком длинной и добавит отступ на мобильных устройствах.
How to make bread at home
.
Sign up
Я использовал класс hero__wrapper, так как этот контейнер может принадлежать только первой секции (Hero Section), поэтому его ширина может быть меньше ширины других контейнеров.
.hero__wrapper
Для центрирования содержимого вы можете применить любой метод, который хотите, в зависимости от варианта использования. В этом примере будет достаточно применить text-align: center, чтобы расположить контент в центре.
Контейнер стоит выравнивать по центру или по левой стороне?
Не знаю, есть ли однозначный ответ на этот вопрос, но я видел сайты, которые на экранах ноутбуков выравнивают контейнер по центру, а на экранах компьютеров – по левой стороне.
Сайт TechCrunch – хороший тому пример. Обратите внимание на то, что на больших экранах он выравнивается по левой стороне.
Лично я больше люблю сайты, которые выравниваются по центру и имеют симметричный отступ справа и слева. Возможно, поэтому я мало знаю о данной теме.
Используем переменные CSS для вариаций контейнеров
Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным. Обратите внимание на следующее:
.wrapper
Возможно, вы заметили, что у функции var есть два значения: первое –
—wrapper-width, и второе – 1170px. Вторая переменная является резервной , то есть используется, если значение переменной —wrapper-width не установлено.
Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.
Таким образом, я создал вариацию контейнера:
- Без добавления новых классов;
- Не копируя и не вставляя стили;
- Более надежную и легко редактируемую с помощью DevTools.
Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:
.wrapper--small < --wrapper-width: 720px; /* это изменит ширину контейнера, установленную по умолчанию */ >
Используем свойство Display: Contents
Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.
.site-header__wrapper
Возможно, в примере, приведенном выше, вам понадобится растянуть header на всю ширину страницы, вместо того, чтобы вписывать его в контейнер.
.site-header__wrapper < display: contents; >.site-header
Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.
Адаптивный фон, фиксированный контент
В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:
section < background-color: #ccc; >.wrapper
Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.
section
Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:
section < padding: 1rem; >@media (min-width: 1170px) < section < padding: 1rem calc(50% - 585px); >>
В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.
section
Конец
Вот мы и стилизовали наш wrapper. У вас есть комментарий или предложение?
Как разместить блок по центру css
Вариантов отцентрировать блок с помощью CSS существует несколько. Рассмотрим их:
Вариант №1. Для корректной работы этого варианта необходимо задать ширину центрируемого блока.
class="center-block">Данные должны быть по центру .center-block /* устанавливаем внешние отступы сверху и снизу в 0, а левый и правый - автоматический. */ margin: 0 auto; /* Для наглядности зададим блоку фон и изменим цвет текста*/ background-color: #38d9a9; color: #fff; /* задаем ширину блока*/ width: 200px; > Вариант №2. Здесь мы используем flexbox. Для корректной работы для цитируемого элемента необходимо создать контейнер-обертку.
class="container"> class="center-block">Данные должны быть по центру class="container"> .container display: flex; justify-content: center; > .center-block /* Для наглядности зададим блоку фон и изменим цвет текста*/ background-color: #38d9a9; color: #fff; width: 200px; > Вариант №3. Тут мы применим абсолютное позиционирование и свойство translate. При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров
class="container"> class="center-block">все буквы в этом параграфе станут заглавные .container background-color: #bac8ff; height: 100vh; > .center-block background-color: #38d9a9; color: #fff; width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) > Определение стилей контейнера макетов в CSS
От автора: контент-ориентированный веб-сайта должен иметь ограничивающую оболочку или ширину, облегчающую чтение. Чтобы достичь этого, мы можем использовать то, что называется контейнером. Использовать контейнер в CSS возможно различными способами, что может привести к возникновению некоторых проблем.
В этой статье я расскажу о контейнерах макетов в CSS, как они работают, как их использовать и когда их не использовать. Обратите внимание, что в этой статье я использую термины оболочка и контейнер, и оба они означают одно и то же.
Краткое описание контейнеров
Когда вы слышите слово оболочка или контейнер, это фактически означает, что группа элементов обернута или содержится внутри другого элемента. Без использования дополнительных элементов мы можем добавить оболочку к элементу body, как показано ниже:
max-width : 1170px ;
margin-left : auto ;
margin-right : auto ;
padding-left : 16px ;
padding-right : 16px ;
Однако добавление оболочки к элементу body может оказаться непрактичным для нашей сегодняшней задачи. Элемент-оболочка может препятствовать выходу дочерних элементов за его границы. Рассмотрим следующий рисунок:
У нас есть элементы aside и main, и они расположены внутри другого элемента, который их оборачивает. Элемент .wrapper имеет, конечно, ширину.
Без оболочки дочерние элементы будут примыкать к краям экрана. Это может быть очень раздражающим для пользователя, особенно на большом экране.
На рисунке выше показано, как элементы будут растягиваться, когда нет элементов, обертывающих их. Это не то поведение, с которым должен встречаться пользователь. Позвольте мне объяснить причину этого.
Зачем нужны контейнеры
Использование контейнера страницы может иметь много преимуществ, о которых вы должны знать как дизайнер или разработчик. Вот некоторые из них:
Сделать контент более читабельным. Без контейнера такой контент, как текст и изображения, может растягиваться на всю ширину экрана. Для маленьких экранов это может показаться нормальным. Однако для большого экрана это крайне раздражает.
Группировка элементов дизайна оптимизирует добавления интервалов.
Разделить элементы дизайна на столбцы без оболочки довольно сложно.
Реализация оболочки в CSS
Теперь, когда вы понимаете основы и преимущества оболочки, давайте рассмотрим, как ее создать в CSS.
Добавление ширины
Первое, что нужно решить при реализации контейнера, это его ширина. Какая вам нужна ширина контейнера? Это зависит от дизайна. Вообще говоря, ширина контейнера, которая колеблется между 1000px — 1300px, является наиболее часто используемой. Популярный фреймворк Bootstrap, например, использует ширину 1170px.
width : 1170px ;
Однако не рекомендуется использовать свойство width, так как оно приведет к горизонтальной прокрутке, если размер экрана меньше, чем 1170px. Вы можете решить это, добавив max-width.
width : 1170px ;
max-width : 100% ;
Пока это работает, вы можете избавиться от width и использовать только max-width.
max-width : 1170px ;
Теперь, когда мы указали ширину контейнера. Давайте перейдем к центрированию.
Центрирование контейнера
Чтобы центрировать контейнер, вам нужно добавить слева и справа auto-поля:
max-width : 1170px ;
margin : 0 auto ;
Согласно спецификации CSS, вот как работают auto-поля:
Если ‘margin-left’ и ‘margin-right’ имеют значение ‘auto’, их используемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.
Я использовал margin: 0 auto, это в сбрасывает верхнее и нижнее поля на ноль и задает auto для левого и правого поля. Есть некоторые последствия использования этого, но я вернусь к ним позже. Сейчас я рекомендую использовать расширенную версию полей.
max-width : 1170px ;
margin-left : auto ;
margin-right : auto ;
Добавление отступов слева и справа
Важной вещью, которую следует учитывать, является добавление отступов для левой и правой сторон. Когда размер области просмотра меньше максимальной ширины оболочки, это приведет к тому, что края оболочки будут прилипать к краям области просмотра.
max-width : 1170px ;
margin-left : auto ;
margin-right : auto ;
padding-left : 16px ;
padding-right : 16px ;
Добавляя отступы, мы можем убедиться, что у нас будет смещение 16px с левой и правой сторон, даже если размер области просмотра меньше максимальной ширины. Отступы являются защитной стратегией, которая позволяет избежать прилипания контейнера к краям области просмотра, когда места недостаточно.
Обновление от 22 июня: использование для контейнера ширины в процентах
Я получил ответ об использовании для контейнера процентной ширины, такой как max-width: 90%, вместо padding-left и padding-right.
Хотя это работает, ширина области просмотра 90% будет слишком большой на больших экранах, вы можете переопределить ее с помощью медиа-запроса.
max-width : 90% ;
margin-left : auto ;
margin-right : auto ;
/* A media query for a large screen */
@media (min-width: 1170px) <
max-width : 1170px ;
Используя процентную ширину, мы добавили дополнительный шаг. Мы можем легко избежать этого шага, используя фиксированное значение ширины. Другое решение, предложенное в этом твите, мы можем комбинировать width: 90% со свойством max-width: 1170px.
max-width : 1170px ;
margin-left : auto ;
margin-right : auto ;
Это интересный подход, но я бы предпочел добавлять отступ по своему усмотрению, а не в зависимости от ширины в процентах.
Тип display для контейнера
Поскольку контейнер является по умолчанию элементом div, это элемент уровня блока. Вопрос в том, что нам делать, если мы хотим изменить тип отображения на grid, если содержимое внутри контейнера должно быть размещено в сетке?
Ну, я не рекомендую делать это, поскольку это противоречит концепции разделения задач. Контейнер предназначен для упаковки другого содержимого, вот и все. Если вам нужна оболочка-сетка, то добавление в контейнер еще одного div с display: grid будет проще, понятнее и удобнее.
Это не рекомендуется, элемент оболочки можно использовать на другой странице, и это может привести к непреднамеренному нарушению макета.
display : grid ;
grid-template-columns : 2fr 1fr ;
grid-gap : 16px ;
Лучшее решение было бы следующим:
.featured-news < display : grid ; grid-template-columns : 2fr 1fr ; grid-gap : 16px ;
Обратите внимание, что я добавил отдельный элемент div для обертывания содержимого. Пожалуйста, не обращайте внимания на классы и соглашения об именах для этого примера. Мы можем предложить еще лучшее решение, используя именование классов, которое можно повторно использовать на разных страницах веб-сайта. Однако соглашения об именах CSS выходят за рамки этой статьи.
Добавление поля между контейнерами
Помните, когда я не рекомендовал использовать сокращенную версию для центрирования элемента контейнера? Я имею в виду это:
margin : 0 auto ;
Хотя это работает, это может сбить с толку, когда у вас на странице есть несколько контейнеров, и вам нужно добавить интервал между ними. Если по какой-либо причине вы добавили для .wrapper другой вариант класса, добавление поля может не сработать по причинам специфичности.
.wrapper-variation < margin-top : 50px ; max-width : 1170px ; margin-left : auto ; margin-right : auto ; padding-left : 16px ; padding-right : 16px ;
margin для элемента .wrapper-variation не будет работать, потому что он переопределен margin: 0 auto. Сокращенное свойство имеет приоритет над полным. Чтобы избежать такой путаницы, рекомендуется использовать условные обозначения для таких случаев.
Теперь давайте перейдем к добавлению поля. В каждом проекте я готовлю набор служебных классов для полей и отступов и использую их по мере необходимости. Рассмотрим следующий рисунок.
margin-bottom : 3rem !important ;
Таким образом, CSS-оболочка остается без изменений, а интервал добавляется с помощью дополнительного служебного класса CSS. Теперь вы можете спросить, зачем мне добавлять несколько контейнеров на страницу, когда я могу добавить один? В приведенном выше HTML-коде есть элемент section между двумя контейнерами.
Здесь полезно использовать !important, так как смысл служебных классов состоит в том, чтобы закрепить свойство, и, добавляя !important, мы можем гарантировать это.
Контейнер внутри полноэкранного раздела
Могут быть случаи, когда у вас есть раздел с фоном, который растягивается на 100% ширины области просмотра, и внутри него есть контейнер. Это похоже на то, что представлено в предыдущем примере. Структура HTML страницы может быть такой:
section имеет ширину 100% окна просмотра. Вы можете добавить к нему цвет фона или изображение. Внутри него контейнер не позволяет содержимому занимать всю ширину области просмотра.
На рисунке выше раздел имеет фоновое изображение и занимает всю ширину области просмотра. Содержимое внутри ограничено шириной контейнера.
Нужен ли контейнер для Hero-раздела?
Это зависит от. Давайте рассмотрим два наиболее часто используемых дизайна Hero-раздела. В первом контент расположен по центру и ограничен определенной шириной.
Во втором содержимое распространяемое на ширину основной оболочки.
Чтобы лучше понять эти два шаблона, давайте рассмотрим, как создать каждый из них.
Hero-раздела с центрированным содержимым
У вас может возникнуть соблазн поместить содержимое Hero-раздела, а затем центрировать все, не учитывая контейнер.
< h2 >How to make bread at home < / h2 >
Используя приведенный выше HTML-код, вы можете центрировать содержимое с помощью text-align:
Это будет выглядеть хорошо, пока вы не измените размер окна браузера. Вот проблемы, с которыми вы можете столкнуться.
Содержимое прилипает к краям
Поскольку на левой и правой сторонах нет отступов, содержимое будет прилипать к краям без надлежащего интервала. Это плохо для пользователя, так как это усложнит чтение контента.
Большая длина строки для больших экранов
На больших экранах текст абзаца может быть очень трудным для чтения, поскольку длина строки слишком велика. Согласно Элементам типографского стиля, применяемым в Интернете, рекомендуемое количество символов для строки составляет от 45 до 75. Что-либо намного большее этого затруднит чтение.
Чтобы избежать возникновения вышеуказанных проблем, можно использовать оболочку, чтобы предотвратить слишком большую длину текста и добавить интервал на мобильном экране.
< h2 >How to make bread at home < / h2 >
Я использовал этот класс hero__wrapper, поскольку эта оболочка может быть настроена только для раздела hero, поэтому она может иметь определенную ширину, которая меньше, чем у обычного элемента оболочки.
.hero__wrapper < max-width : 720px ; margin-left : auto ; margin-right : auto ; padding-left : 16px ; padding-right : 16px ;
Для центрирования контента можно использовать технику по вашему выбору, в зависимости от варианта применения. Для этого примера достаточно text-align: center.
Должен ли контейнер быть центрирован или выровнен по левому краю?
Я не знаю, есть ли точный ответ на этот вопрос, но я видел сайты, которые центрируют оболочку на экранах ноутбуков, и она выровнена по левому краю на настольных компьютерах.
Сайт Techcrunch является примером этого. Обратите внимание, как содержимое выравнивается по левому краю на больших экранах.
Лично мне нравится читать веб-сайт, который имеет центрированный контент и симметричный интервал слева и справа. Но это может быть причиной того, что я не знаю хороших пример противоположного.
Использование переменных CSS для вариантов контейнера
Редко, когда вам нужен контейнер только одного размера. Ширина контейнера может быть маленькой или большой, в зависимости от содержимого и варианта использования. Используя CSS-переменные, мы можем создать современную оболочку, и вы получите большую гибкость. Рассмотрим пример ниже: