Как центрировать блок внутри блока css
Перейти к содержимому

Как центрировать блок внутри блока css

  • автор:

Выравнивание блоков в CSS разметке Grid

Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнём с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.

Две оси grid layout

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов — оси блока или столбца, оси inline или строки. Ось блока — это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.

Изображение, показывающее расположение осей блока или столбца.

Внутренняя ось (inline axis) проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.

Изображение, показывающее расположение внутренней оси (оси строк).

Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.

Выравнивание элементов на блоке или столбце по оси

Элементы управления align-self и align-items на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.

В следующем примере у меня есть четыре области сетки внутри моей сетки. Я могу использовать свойство align-items в контейнере сетки, чтобы выровнять элементы, используя одно из следующих значений:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline
*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Имейте в виду, что после установки align-self: start высота каждого дочернего будет определяться содержимым . Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого растягивается, чтобы заполнить его область сетки.

Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

В следующем примере я использую свойство align-self , чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start , третий end и четвёртый center .

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; align-self: start; > .item3  grid-area: c; align-self: end; > .item4  grid-area: d; align-self: center; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Элементы с внутренним соотношением сторон

Спецификация указывает, что поведение по умолчанию в align-self должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как start . Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.

Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки align-self и justify-self (en-US) start . Это будет имитировать правильное поведение после его реализации.

Justifying Items on the Inline or Row Axis

Поскольку align-items и align-self обрабатывают выравнивание элементов на оси блока, justify-items и justify-self (en-US) выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для align-self .

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

Вы можете увидеть тот же пример, что и для align-items ниже. На этот раз мы применяем свойство justify-self (en-US).

Опять же, значение по умолчанию stretch , за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; justify-self: start; > .item3  grid-area: c; justify-self: end; > .item4  grid-area: d; justify-self: center; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Как и align-self и align-items , вы можете применить justify-items к контейнеру сетки, чтобы установить значение justify-self (en-US) для всех элементов.

Свойства justify-self (en-US) и justify-items не реализованы в flexbox. Это связано с одномерным характером flexbox и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство justify-content .

Center an item in the area

Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". a a ." ". a a ."; > .item1  grid-area: a; align-self: center; justify-self: center; > 
div class="wrapper"> div class="item1">Item 1div> div> 

Aligning the grid tracks on the block, or column, axis

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с align-content выравниванием дорожек на оси блока и justify-content , выполняющим выравнивание по встроенной оси. Значения для align-content и justify-content :

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start , поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Если я добавлю align-conten в мой контейнер со значением end , все треки перейдут в конечную строку контейнера сетки в размерности блока:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: end; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения space-between , space-around и space-evenly . Если мы обновим align-content до space-between , вы увидите как выглядят элементы на нашем пространстве grid:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.

В приведённом ниже изображении я поместил сетку с align-content , со значением start рядом с сеткой, когда значение align-content имеет значение space-between . Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

Демонстрация увеличения элементов пир использовании space-between.

Justifying the grid tracks on the row axis

На оси inline мы можем использовать justify-content для выполнения того же типа выравнивания, что мы использовали align-content для оси блока.

Используя тот же пример, я устанавливаю justify-content space-around . Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; justify-content: space-around; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Alignment and auto margins

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

В следующем примере я дал элементу 1 левое поле auto . Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 
.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; margin-left: auto; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 
div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter (en-US) :

Изображение, показывающее использование auto-margins с подсветкой от инструмента разработчика.

Alignment and Writing Modes

Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.

CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.

Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left , или абсолютно позиционирующий элемент, используя top , right , bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

CSS | Как мне блок, внутри которого блок, выровнить по центру

Нужна помощь с выравниваниями! Я делаю первое приложение на Vue3: «Counter Clicker», также изучаю CSS. Но дело в чём, у меня есть главный , в нём располагается . И там всякое, я пока добавил красоту, но ещё не добавлял функционал. Если навестить на .App , то ширина увеличивается. Потому, мне нужен самый верхний — главный . Но когда я увеличиваю ширину блока, то он увеличивается в другую сторону. Поэтому я делал так, чтобы главный располагал дочерние тэги по центру. Но я не знаю как. Помогите, вот мой код:

#count < font-size: 60px; >.main-app < align-items: center; >.App < position: absolute; background-color: rgb(220, 220, 220); border-width: 8px; border-style: solid; border-color: rgb(35, 35, 35); padding-bottom: 15px; border-radius: 67px; width: 700px; align-items: center; transition-duration: 0.5s; >.App:hover < width: 1000px; >.container < text-align: center; >.btn < margin: 5px; height: 40px; width: 140px; font-size: 24px; outline: none; border-radius: 30px; >.increment < background-color: rgb(100, 248, 100); >.decrement
 

You counted it > times.


введите сюда описание изображения

То есть нужно сделать чтобы было вот так:

Выравнивание полей CSS

Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.

Примечание: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.

Старые методы выравнивания

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.

Если вы изначально узнали Flexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.

Основные примеры

Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в Grid and Flexbox.

Пример выравнивания раскладки сетки CSS

В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки align-self в центр.

Пример выравнивания Flexbox

В этом примере три элемента гибкости выровнены по главной оси с использованием justify-content и на поперечной оси с использованием align-items . Первый элемент переопределяет align-items , заданные в группе align-self по center .

Ключевые понятия и терминология

Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.

Связь с режимами записи

Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.

Два измерения выравнивания

При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей — inline (или main) оси и block (или cross) оси. Внутренняя ось — это ось, по которой используются слова в потоке предложения в режиме записи — для английского языка, например, встроенная ось горизонтальна. Ось блока — это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.

При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с justify- :

При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с align- :

Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда flex-direction установлено в row . Свойства меняются местами, когда flexbox установлен в column . Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства justify- всегда используются для выравнивания по главной оси, align- на поперечной оси.

The alignment subject

Объект выравнивания — это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.

The alignment container

Контейнер выравнивания — это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

Fallback alignment

Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.

Типы выравнивания

Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.

  • Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
  • Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
  • Distributed alignment (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

Значения ключевых слов позиционирования

Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

  • center
  • start
  • end
  • self-start
  • self-end
  • flex-start for Flexbox only
  • flex-end for Flexbox only
  • left
  • right

Помимо физических значений left и right , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.

Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.

Исходное выравнивание

Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

  • baseline
  • first baseline
  • last baseline

Исходное выравнивание содержимого — указание значения выравнивания базовой линии для justify-content или align-content — работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment — это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items .

Distributed alignment

Ключевые слова распределённого выравнивания используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

  • stretch
  • space-between
  • space-around
  • space-evenly

Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.

Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.

Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.

Выравнивание переполнения

safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведёт к такой потере данных.

Пробелы между boxes

Спецификация выравнивания коробки также включает свойства gap , row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.

Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства:

В приведённом ниже примере макет сетки использует сокращённую gap , чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

В этом примере я использую свойство grid-gap (en-US) в дополнение к gap . Первоначальные свойства зазора были предварительно префиксными grid- в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

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

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

Страницы, детализирующие индивидуальные свойства выравнивания

Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:

  • Box alignment in Flexbox
  • Box alignment in CSS Grid Layout (en-US)
  • Box alignment in multiple-column layout (en-US)
  • Box alignment for block, absolutely positioned and table layout (en-US)

Все про CSS выравнивание

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

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

Выравнивание паддингами. Пример.

.example-wrapper1< background: #535E73; width: 200px; height: 200px; padding: 20px 50px; >

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

.example-wrapper2< position: relative; height: 250px; background: url(space.jpg); > .cat-king< width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: url(king.png); >

Горизонтальное выравнивание

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align«. При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text< text-align: center; padding: 10px; background: #FF90B8; >

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

А вот этот текст выровнен по левому краю, зато он находится в блоке, который выравнивается относительно обертки по центру.

.example-wrapper3< text-align: center; background: #FF90B8; > .inline-text< display: inline-block; width: 40%; padding: 10px; text-align: left; background: #FFE5E5; >

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper< height: 200px; background: #F1BF88; > .lama1< height: 200px; width: 200px; background: url(lama.jpg); margin: 0 auto; >

Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) — он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.

Вертикальное выравнивание

С вертикальным выравниванием намного больше проблем — по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height» и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.

Это фиолетовая строчка, высота которой равна высоте блока.

.example-wrapper4< line-height: 100px; color: #DC09C0; background: #E5DAE1; height: 100px; text-align: center; >

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

А это inline-элемент. Здесь несколько оранжевых
строчек. Они выравниваятся
за счет установленной высоты строки блока-родителя.

.example-wrapper5 < line-height: 160px; height: 160px; font-size: 0; background: #FF9B00; > .example-wrapper5 .text1< display: inline-block; font-size: 14px; line-height: 1.5; vertical-align: middle; background: #FFFAF2; color: #FF9B00; text-align: center; >

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

Выравнивание по вертикали в таблицах

Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell«.

Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *