Содержание

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

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

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

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align, центральные блоки, используя auto margins, а в макетах таблицы или встроенного блока, используя 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, выравнивание будет выполнено, даже если это приведет к такой потере данных.

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

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

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

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

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

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

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

CSS Properties

Glossary Entries

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

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

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

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

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов — оси блока или столбца, оси 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
. 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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

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

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

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

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

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

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

.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>
 <div>Item 1</div>
</div>

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с 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, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

. 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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

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

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

.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>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

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

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

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

Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <div> <img src=»img/raccoon.svg» alt=»Аватарка»> </div> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page. png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: «Verdana», sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

CSS вертикальное выравнивание текста внутри li



Я показываю количество коробок в строке с фиксированной высотой и шириной, сгенерированных из тегов <li>. теперь мне нужно выровнять текст по вертикальному центру. Вертикальное выравнивание CSS не имеет никакого влияния, может быть, я что-то упускаю???

Я не ищу трюков с использованием (поля, отступы, высота строки), они не будут работать, потому что некоторые тексты длинные и будут разбиваться на две строки.

Пожалуйста, найдите фактический код:

CSS код 

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Код HTML 

<ul>
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>
html css vertical-alignment
Поделиться Источник AK4668     17 декабря 2011 в 09:36

9 ответов

  • CSS вертикальное выравнивание — еще раз

    Я знаю, что этот вопрос возникает снова и снова. Вертикальное выравнивание в CSS, по-видимому, является серьезной проблемой… Я пытаюсь выровнять два текста ( Kinesiologie Stammheim и Dies ist der Platzhalter für ein Zitat zum Thema Erde ) в голове этого сайта к середине:…

  • Вертикальное выравнивание текста по центру и блоку выберите на li

    Мне бы хотелось, чтобы столбец кнопок с текстом, центрированным вертикально, с блоком выбора на кнопках, так что в любом месте кнопка нажата, она перейдет к ссылке. Вертикальное выравнивание текста не работает, и блок не выбирает. <!DOCTYPE html> <html…


101

Определите родительский элемент с помощью display: table , а сам элемент-с помощью vertical-align: middle и display: table-cell .

Поделиться Asaf Chertkoff     20 декабря 2011 в 15:34


59

line-height — это способ выравнивания текста по вертикали. Это довольно стандартно, и я не считаю его «hack». Просто добавьте line-height: 100px к вашему ul.catBlock li , и все будет хорошо.

В этом случае вам, возможно, придется добавить его в ul.catBlock li a , так как весь текст внутри li также находится внутри a . Я видел, что некоторые странные вещи происходят, когда вы делаете это, так что попробуйте оба и посмотрите, какой из них работает.

Поделиться Logan Serman     17 декабря 2011 в 15:37


45

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

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Поддержка браузера для flexbox намного лучше, чем это было, когда @scottjoudry опубликовал свой ответ выше, но вы все равно можете рассмотреть возможность добавления префиксов или другие варианты, если вы пытаетесь поддерживать гораздо более старые браузеры. caniuse: flex

Поделиться flyingace     11 декабря 2017 в 16:53

  • CSS вертикальное выравнивание внутри встроенного блока

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

  • Есть ли способ установить вертикальное выравнивание в css?

    Есть ли способ установить вертикальное выравнивание в css? У меня есть текст внутри моего элемента <li> , но когда я устанавливаю выравнивание текста по центру, он устанавливает только горизонтальное выравнивание текста. Но когда я использую функцию padding-top, она изменяет размер элемента…


16

Удивительно (или нет), но инструмент vertical-align действительно лучше всего подходит для этой работы. Лучше всего, что никакой Javascript не требуется.

В следующем примере я помещаю класс outer в середину тела, а класс inner — в середину класса outer .

Предварительный просмотр: http://jsfiddle.net/tLkSV/513/

HTML:

<div>
    <span></span><div>
        <span></span><div>

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Вертикальное выравнивание работает путем выравнивания центров элементов, расположенных рядом друг с другом. Применение вертикального выравнивания к одному элементу абсолютно ничего не дает. Если вы добавите второй элемент, который не имеет ширины, но является высотой контейнера, ваш единственный элемент переместится в вертикальный центр с этим элементом без ширины, таким образом вертикально центрируя его. Единственное требование состоит в том, что вы устанавливаете оба элемента в inline (или inline-block) и устанавливаете их атрибут вертикального выравнивания в vertical-align: middle .

Примечание: Вы можете заметить в моем коде ниже, что мой тег <span> и тег <div> соприкасаются. Поскольку они оба являются встроенными элементами, пробел фактически добавит пространство между элементом no-width и вашим div, поэтому не забудьте его исключить.

Поделиться Wex     20 декабря 2011 в 16:53


16

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

Поддержка браузера: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Справочная информация по Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Поделиться Scott Joudry     08 июля 2014 в 17:06


6

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

Чтобы заставить vertical-align: middle; работать, вам нужно использовать display: table; для вашего элемента ul и display: table-cell; для элементов li , а затем вы можете использовать vertical-align: middle; для элементов li .

Вам не нужно предоставлять какие-либо явные margins , paddings , чтобы сделать ваш текст вертикально средним.

Демонстрация 

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Поделиться Mr. Alien     22 июня 2013 в 05:49


4

Как объяснено здесь: https://css-tricks. com/centering-in-the-unknown/ .

Как было проверено в реальной практике, наиболее надежным, но элегантным решением является вставка вспомогательного встроенного элемента в элемент <li /> в качестве 1-го дочернего элемента, высота которого должна быть установлена в 100% (из высоты его родителя, <li /> ), а его vertical-align -в середину. Для достижения этой цели можно поставить <span /> , но наиболее удобным способом является использование li:after псевдокласса.

Скриншот:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul. menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Поделиться Jeff Tian     30 сентября 2014 в 13:38


1

Дайте этому решению попробовать

Работает лучше всего в большинстве случаев

вы можете использовать div вместо ли для этого

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
<div>
    <div>
        <p>Isnt it good!</p>
     
    </div><div></div>
</div>

Поделиться keshav     15 августа 2015 в 06:36


0

Простое решение для вертикального выравнивания середины. .. для меня это работает как заклинание

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}

Поделиться Fahad Ali     10 апреля 2018 в 06:48

Похожие вопросы:


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

У меня есть некоторые макеты страниц, которые требуют нескольких столбцов, и все их содержимое должно быть вертикально выровнено по верхнему краю, поскольку разные столбцы будут иметь больше/меньше…


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

Как я могу назначить вертикальное выравнивание по центру для текста внутри TextBlock? Я нашел свойство TextAlignment, но оно предназначено для горизонтального выравнивания текста. Как это сделать…


Вертикальное выравнивание текста внутри встроенного li

Я пытаюсь создать самонастраивающееся горизонтальное меню и ищу вертикальное выравнивание текста в пределах li , которые отображаются как inline . В настоящее время текст приклеен сверху. Все мои…


CSS вертикальное выравнивание — еще раз

Я знаю, что этот вопрос возникает снова и снова. Вертикальное выравнивание в CSS, по-видимому, является серьезной проблемой… Я пытаюсь выровнять два текста ( Kinesiologie Stammheim и Dies ist der…


Вертикальное выравнивание текста по центру и блоку выберите на li

Мне бы хотелось, чтобы столбец кнопок с текстом, центрированным вертикально, с блоком выбора на кнопках, так что в любом месте кнопка нажата, она перейдет к ссылке. Вертикальное выравнивание текста…


CSS вертикальное выравнивание внутри встроенного блока

Я пытаюсь стилизовать некоторые кнопки с помощью CSS, и мой контейнер кнопок представляет собой встроенный блок с текстом, вертикально центрированным внутри блока, используя высоту строки. Проблема…


Есть ли способ установить вертикальное выравнивание в css?

Есть ли способ установить вертикальное выравнивание в css? У меня есть текст внутри моего элемента <li> , но когда я устанавливаю выравнивание текста по центру, он устанавливает только. ..


CSS: вертикальное выравнивание текста в элементе li не работает

Я использую list-style-image для элементов li и однострочный текст. Но это выглядит плохо, поэтому я хочу выровнять текст по вертикали до середины изображения. Я должен использовать вертикальное…


Вертикальное выравнивание наследования в CSS

Я просто просматривал документацию по вертикальному выравниванию, и на SO есть довольно много потоков, которые помогают понять вертикальное выравнивание. Но у меня есть очень простая трудность. Он…


Вертикальное выравнивание текста внутри динамической высоты div

Я хочу вертикально выровнять текст внутри div, который является динамической высотой, скажем, 10% страницы, например, но без использования хорошо известного table method. Может ли это быть…

Выравнивание элементов. justify-content | Руководство по Flexbox (Примеры)

  1. Что такое Flexbox. Flex Container
  2. Макет страницы на Flexbox
  3. Направление flex-direction
  4. flex-wrap
  5. flex-flow. Порядок элементов
  6. Выравнивание элементов. justify-content
  7. Выравнивание элементов. align-items и align-self
  8. Выравнивание строк и столбцов. align-content
  9. Управление элементами. flex-basis, flex-shrink и flex-grow
  10. Многоколоночный дизайн на Flexbox

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

  • flex-элементы не используют все пространство flex-контейнера
  • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

  • flex-start: значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.
  • flex-end: последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее
  • center: элементы выравниваются по центру
  • space-between: если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start. В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами
  • space-around: если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

Выравнивание для расположения элементов в виде строки:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.5em;
        color: white;
      }
      .color1 {
        background-color: #675ba7;
      }
      .color2 {
        background-color: #9bc850;
      }
      .color3 {
        background-color: #a62e5c;
      }
      .color4 {
        background-color: #2a9fbc;
      }
      .color5 {
        background-color: #f15b2a;
      }
    </style>
  </head>
  <body>
    <h4>Flex-end</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Center</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Space-between</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Space-around</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Выравнивание при расположении в виде столбцов:

См. также

  1. Что такое Flexbox. Flex Container
  2. Макет страницы на Flexbox
  3. Направление flex-direction
  4. flex-wrap
  5. flex-flow. Порядок элементов
  6. Выравнивание элементов. justify-content
  7. Выравнивание элементов. align-items и align-self
  8. Выравнивание строк и столбцов. align-content
  9. Управление элементами. flex-basis, flex-shrink и flex-grow
  10. Многоколоночный дизайн на Flexbox

CSS/CSS3. Некоторые приемы центрирования.

Выравнивание элементов веб-страницы по горизонтали и вертикали можно сделать разными способами. Выбор приемов центрирования во многом зависит от типа элемента (блочный или строковый), от его размеров, типа позиционирования и т.д. 

ГОРИЗОНТАЛЬНОЕ ЦЕНТРИРОВАНИЕ.
Центрирование строк текста.


p { text-align: center; }
h3 { text-align: center; }

Центрирование блока с фиксированной шириной. 


p.blocktext {
   margin-left: auto;
   margin-right: auto;
   width: 6em;
}
...
<p>Этот довольно ...

Центрирование изображения

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



img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
}
...
<img  src="" alt="">

ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ.
CSS уровня 2.

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



div.outer {
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}
. ..
<div>
   <p>Этот параграф отцентрирован вертикально.</p>
</div>

 

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



/* Вертикальное центрирование: сделать размеры блока максимальными и отформатировать его как таблицу */
div.outer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: table
}
p {
    display: table-cell;
    vertical-align: middle
}
/* Горизонтальное центрирование изображения: выставить левый и правый отступы в 'auto' */
   img.displayed {
     display: block;
     margin: 1em auto
}
/* Так же нужно отцентировать строки параграфа */
p {
  text-align: center
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали и горизонтали. 
   <img class=displayed src="" alt="">
  </p>
</div>

CSS уровня 3.

CSS3 предлагает другие возможности вертикального выравнивания. Например есть способ центрирования по вертикали с использованием абсолютного позционирования, которое, однако, может привести к частичному перекрытию текста. Но если точно известно, что перекрытие текста не станет проблемой в веб-документе, то можно использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент:



div.outer {
             height: 10em;
             position: relative }              /* 1 */
          div.outer p {
             margin: 0;
             position: absolute;               /* 2 */
             top: 50%;                         /* 3 */
             transform: translate(0, -50%) }   /* 4 */
...
<div>
  <p>Этот параграф отцентрирован по вертикали. </p>
</div>

Основные правила:

  1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.) 

Есть также прием выравнивания по вертикали без использования абсолютного позиционирования. Он основан на ключевом слове ‘flex’ для свойства ‘display’:



div.outer {
  height: 10em;
  display: flex;
  align-items: center
}
div.outer p {
  margin: 0
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали с помощью свойства 'display: flex'. </p>
</div>

Если добавить еще и выравнивание по горизонтали, то получим полностью центрированный элемент:



div.outer {
  height: 10em;
  display: flex;
  justify-content: center; /*Центрирование по горизонтали*/
  align-items: center;     /*Центрирование по вертикали */
}
div.outer p {
  margin: 0
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали и горизонтали.</p>
</div>

Основной источник  

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

Сегодня хочется рассмотреть очень важную тему — выравнивание элементов по горизонтали и вертикали.
Изучим текущее положение дел.
Итак, мы видим, что у нас есть блочный элемент, растягивающийся по ширине на всю страницу, а внутри дочерний строковый span. У обоих элементов по-умолчанию position: static, значит они находятся в потоке.

Выравнивание по горизонтали

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

А что если бы наш дочерний элемент был бы блочным с заданной шириной? Видим, что на блочное содержимое text-align не действует:

Если мы не зададим ширину, то текст отцентрируется, но лишь потому что элемент займет всю ширину, а нам обычно нужно центрирование самого блока.
В данном случае мы можем прибегнуть к margin: auto. Браузер автоматический определит отступы нашего дочернего элемента со всех сторон. Но посмотрите по вертикали элемент не отцентрировался. Потому что margin-top и margin-bottom приводятся автоматом к 0.

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

Что же нам делать с вертикальным выравниванием?
Рассматриваем известные. Мы знаем высоту родительского элемента, к тому же дочерний элемент — одна строка. Значит можем задать ей высоту:
line-height: 200px;
Ровно столько сколько высота родительского элемента. Так как текст в span встает по центру строки, мы его так отцентрируем.

Аналогично line-height сработает и для строчного дочернего элемента.
Однако, для нескольких строк такой вариант не сработает.
Для наглядности покрасим наш родительский элемент. И можно вспомнить про position: absolute.
Для начала нужно позиционировать родительский элемент, чтобы отсчитывать отступы дочернего относительно него. Ставим в div position: relative.
Далее позиционируем дочерний абсолютно, задаем отступ сверху 50%. Однако, в данном случае по центру у нас будет вершина дочернего элемента. Ставим margint-top равный половине высоты дочернего элемента. В случае с одной строкой эта высота равна line-height.

Отлично, все работает. Разве что перестал работать margin: auto для выравнивания по горизонтали, так как при абсолютном позиционировании margin рассчитывается только если задано расстояние элемента от родительского позиционированного для данной стороны. Т.е. для того, чтобы работал margin: auto для левой и правой стороны, нам нужно задать left и right.

А теперь давайте забудет про абсолютное позиционирование. И попробуем другие способы. Например, мы может воспользоваться свойством display: table. Правда, как у любой таблицы, ширина родительского элемента теперь рассчитывается по содержимому. Зато нам не требуется знание высоты дочернего элемента, как в случаей с абсолютным позиционированием.

Кстати, если дочерний элемент инлайновый и известна высота родителя, то мы можем использовать vertical-align: middle.

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

Почему это работает? Сначала следует сказать,что строчно-блочные элементы выстраиваются в линию, которая заключена в так называемую box-line. Высота коробки зависит от высоты содержимого. Внутри коробки есть базовая линия, на которой располагается строковое содержимое инлайн элемента. Положение этой линии может меняться в зависимости от значения vertical-align любого инлайн элемента, входящего в box-line.
Мы хотим выровнять относительно родительского элемента, значит нужно назначить дочернему его высоту. Мы не можем нашему дочернему поставить такую высоту, ведь он нам нужен не на весь родительский. Тогда мы используем дополнительный элемент. Он невидим, если мы, проставим для него только высоту. Но он меняет положение базовой линии для всей строки. Поэтому аналогично выравнится и исходный элемент.

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

Полезные статьи

Vertical-Align: All You Need To Know
A Complete Guide to Flexbox

Как выровнять элементы в CSS — Smashing Magazine

Об авторе

Рэйчел Эндрю — веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬

Есть несколько способов выровнять элементы в CSS. В этой статье Рэйчел Эндрю объясняет, что они собой представляют, и дает несколько советов, которые помогут вам запомнить, что использовать и почему.

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

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

Выравнивание текста и встроенных элементов

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

Бесплатная 30-дневная пробная версия

The Ultimate Web Designer Toolbox

Мы объединились с Envato, чтобы дать нашим читателям 30 дней бесплатного доступа к крупнейшему в отрасли подписка — Envato Elements. Подписка дает неограниченное количество загрузок более чем 50 миллионов активов, таких как WordPress темы, плагины, фотографии и наборы пользовательского интерфейса. Без ограничений на скачивание и полный коммерческая лицензия.

Первые 30 дней — в подарок! Начать сейчас — отменить в любой момент.

Загрузить сейчас

В приведенном ниже примере у меня есть текст с большим встроенным изображением. Я использую vertical-align: middle на изображении, чтобы выровнять текст по середине изображения.

См. Пример «Вертикальное выравнивание пера» от Рэйчел Эндрю.

См. Пример «Вертикальное выравнивание пера» от Рэйчел Эндрю.
Свойство line-height и выравнивание

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

См. «Вертикальное выравнивание пера и высоту строки» Рэйчел Эндрю.

См. «Вертикальное выравнивание пера и высоту строки» Рэйчел Эндрю.

Оказывается, , высота строки, и размер текста довольно сложны, и я не собираюсь углубляться в эту кроличью нору в этой статье. Если вы пытаетесь точно выровнять встроенные элементы и хотите действительно понять, что происходит, я рекомендую прочитать «Deep Dive CSS: Font Metrics, line-height и vertical-align .”

Когда я могу использовать свойство с вертикальным выравниванием ?

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

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

См. Перо inline-block и vertical-align от Рэйчел Эндрю.

См. Встроенный блок Pen и вертикальное выравнивание Рэйчел Эндрю.

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

См. Запасной вариант Pen inline-block flex от Рэйчел Эндрю.

См. Запасной вариант Pen inline-block flex от Рэйчел Эндрю.

Тот факт, что vertical-align работает с ячейками таблицы, является причиной того, что трюк для вертикального центрирования элемента с использованием display: table-cell работает.

Теперь, когда у нас есть более эффективные способы выравнивания блоков в CSS (как мы рассмотрим в следующем разделе), нам не нужно использовать свойства vertical-align и text-align в других местах, кроме встроенные и текстовые элементы, для которых они были разработаны. Тем не менее, они по-прежнему полностью допустимы для использования в этих текстовых и встроенных форматах, поэтому помните, что если вы пытаетесь выровнять что-то встроенное, вам нужно достичь этих свойств, а не выравнивания поля.

Выравнивание коробки

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

  • justify-content
  • align-content
  • justify-self
  • align-self
  • justify-items
  • align-items

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

Таким образом, в следующий раз, когда кто-то в Интернете скажет вам, что вертикальное выравнивание — самая сложная часть CSS, вы можете сказать им это (что даже уместится в твите):

 .container {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}

В будущем мы, возможно, даже сможем отказаться от display: flex , когда свойства Box Alignment будут реализованы для Block Layout. Однако на данный момент создание родительского элемента для объекта, который вы хотите центрировать, в гибком контейнере — это способ добиться выравнивания по горизонтали и вертикали.

Два типа выравнивания

При выравнивании гибких элементов и элементов сетки у вас есть две возможности для выравнивания:

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

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

Работа с дополнительным пространством: align-content и justify-content

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

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

См. Pen justify-content и align-content Рэйчел Эндрю.

См. Pen justify-content и align-content Рэйчел Эндрю.
Перемещение элементов вокруг: justify-self , align-self , justify-items и align-items

Затем у нас есть align-self и justify-self применительно к индивидуальному сгибанию или элементы сетки; вы также можете использовать align-items и justify-items в контейнере, чтобы установить все свойства сразу. Эти свойства имеют дело с фактическим элементом гибкости или сетки, то есть перемещением содержимого внутри области сетки или гибкой линии.

  • Схема сетки Вы получаете оба свойства, поскольку можете перемещать элемент по оси блока и по встроенной оси, поскольку у нас есть определенная область сетки, в которой он находится.
  • Flex Layout Вы можете выровнять только по поперечной оси, так как главная ось управляется только распределением пространства. Итак, если ваши элементы расположены в ряд, вы можете использовать align-self , чтобы сдвинуть их вверх и вниз внутри гибкой линии, выровняв их друг относительно друга.

В моем примере ниже у меня есть контейнер flex и grid, и я использую align-items и align-self в Flexbox, чтобы перемещать элементы вверх и вниз относительно друг друга по поперечной оси.Если вы используете Firefox и проверяете элемент с помощью Firefox Flexbox Inspector, вы можете увидеть размер гибкого контейнера и то, как элементы перемещаются по вертикали внутри него.

Выровненные гибкие элементы с гибким контейнером, выделенным в Firefox (большой предварительный просмотр)

В сетке я могу использовать все четыре свойства для перемещения элементов внутри их области сетки. Еще раз, Firefox DevTools Grid Inspector будет полезен при игре с выравниванием. С наложенными линиями сетки вы можете увидеть область, внутри которой перемещается контент:

Выровненные элементы сетки с выделенной сеткой в ​​Firefox (большой предварительный просмотр)

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

См. Pen justify-self, align-self, justify-items, align-items от Рэйчел Эндрю.

См. Pen justify-self, align-self, justify-items, align-items от Рэйчел Эндрю.

Смущает выровнять И оправдать

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

Для компоновки сетки необходимо знать, в каком направлении вы выравниваете: в блочном или в линейном. Направление блока — это блоки направления, расположенные на вашей странице (в вашем режиме письма), т. е.е. для английского — вертикально. Inline direction — это направление, в котором идут предложения (в английском языке это направление слева направо по горизонтали).

Чтобы выровнять объекты в направлении блока, вы будете использовать свойства, которые начинаются с align- . Вы используете align-content для распределения пространства между дорожками сетки, если в контейнере сетки есть свободное место, и align-items или align-self для перемещения элемента внутри области сетки, в которую он был помещен .

В приведенном ниже примере используются два макета сетки. Один из них имеет режим письма : horizontal-tb (по умолчанию для английского языка), а другой режим письма : vertical-rl . Это единственное различие между ними. Вы можете видеть, что свойства выравнивания, которые я применил, работают точно так же на оси блока в обоих режимах.

См. «Выравнивание оси блока сетки пера» Рэйчел Эндрю.

См. «Выравнивание оси блока сетки пера» Рэйчел Эндрю.

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

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

См. «Внутреннее выравнивание сетки пера» Рэйчел Эндрю.

См. Строковое выравнивание сетки пера Рэйчел Эндрю.

Flexbox немного сложнее из-за того, что у нас есть главная ось, которую можно изменить на строка или столбец . Итак, давайте сначала подумаем об этой главной оси. Он задается свойством flex-direction . Начальным (или по умолчанию) значением этого свойства является строка , которая будет располагать элементы гибкости в виде строки в текущем режиме записи — вот почему при работе на английском языке мы получаем элементы, расположенные горизонтально, когда мы создать гибкий контейнер. Затем вы можете изменить основную ось на flex-direction: column , и элементы будут размещены в виде столбца, что означает, что они расположены в направлении блока для этого режима записи.

Поскольку мы можем переключать оси, наиболее важным фактором в Flexbox является вопрос: «Какая ось является моей основной?» Как только вы это узнаете, тогда для выравнивания (когда на вашей главной оси) вы просто используете justify-content . Не имеет значения, является ли ваша основная ось строкой или столбцом. Вы управляете пространством между гибкими элементами с помощью justify-content .

См. Перо justfy-content во Flexbox от Рэйчел Эндрю.

См. Перо justfy-content во Flexbox от Рэйчел Эндрю.

На поперечной оси вы можете использовать align-items , которые будут выравнивать элементы внутри гибкого контейнера или гибкой линии в многострочном гибком контейнере. Если у вас есть многострочный контейнер с flex-wrap: wrap и имеют пространство в этом контейнере, вы можете использовать align-content для распределения пространства по поперечной оси.

В приведенном ниже примере мы делаем и то, и другое с гибким контейнером, отображаемым в виде строки и столбца:

См. Выравнивание оси Pen Cross в Flexbox от Рэйчел Эндрю.

См. Выравнивание оси Pen Cross в Flexbox от Рэйчел Эндрю.

Когда justify-content или align-content Не работают

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

Вот пример Flex: я установил flex-direction: row и у меня есть три элемента. Они не занимают все пространство в гибком контейнере, поэтому у меня есть свободное место на главной оси, начальное значение для justify-content — flex-start , поэтому все мои элементы выстраиваются в линию в начале и дополнительное пространство в конце.Я использую Firefox Flex Inspector, чтобы выделить пространство.

Свободное пространство в конце контейнера (большой предварительный просмотр)

Если я изменю направление гибкости на space-between , это дополнительное пространство теперь распределяется между элементами:

Теперь свободное пространство между элементами (большое предварительное изображение )

Если я теперь добавлю к своим элементам больше контента, чтобы они стали больше и больше не было дополнительного места, то justify-content ничего не сделает — просто потому, что нет места для распространения.

Теперь нет места для распространения (большой предварительный просмотр)

Часто задаваемый мне вопрос: почему justify-content не работает, когда flex-direction — это column . Обычно это происходит потому, что нет места для распространения. Если вы возьмете приведенный выше пример и сделаете его flex-direction: column , элементы будут отображаться в виде столбца, но не будет дополнительного пространства под элементами, как при использовании flex-direction: row . Это потому, что когда вы создаете гибкий контейнер с display: flex , у вас есть гибкий контейнер на уровне блока; это займет все возможное пространство во внутреннем направлении.В CSS элементы не растягиваются в направлении блока, поэтому лишнего места нет.

Высота столбца ровно настолько, насколько это необходимо для отображения элементов (большой предварительный просмотр)

Добавьте высоту контейнера, и, если это больше, чем требуется для отображения элементов, у вас будет дополнительное пространство и, следовательно, justify-content будет работать на вашей колонке.

Добавление высоты к контейнеру означает, что у нас есть свободное место (большой предварительный просмотр)

Почему нет justify-self во Flexbox?

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

Flexbox не имеет дорожек в отличие от макета сетки.На главной оси все, с чем нам нужно поиграть, — это распределение пространства между элементами. Нет концепции дорожки, в которую помещается гибкий элемент. Таким образом, не создается области, в которой можно было бы перемещать элемент. Вот почему в Flexbox нет свойства justify-self на основных осях.

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

Автоматическое поле будет занимать все пространство в том направлении, в котором оно применяется, поэтому мы можем центрировать блок (например, макет нашей главной страницы), используя левое и правое поле авто. С автоматическим полем с обеих сторон каждое поле пытается занять все пространство и таким образом выталкивает блок в середину. С нашей строкой гибких элементов мы можем добавить margin-left: auto к элементу, по которому мы хотим, чтобы произошло разделение, и пока есть доступное место в гибком контейнере, вы получите разделение. Это хорошо работает с Flexbox, потому что как только нет доступного места, элементы ведут себя как обычные элементы Flex.

См. «Выравнивание пера с автоматическими полями» Рэйчел Эндрю.

См. «Выравнивание пера с автоматическими полями» Рэйчел Эндрю.

Flexbox и микрокомпоненты

Одна из вещей, которые, как мне кажется, часто упускаются из виду, — это то, насколько полезен Flexbox для выполнения крошечных заданий по разметке, когда вы можете подумать, что использование с вертикальным выравниванием — лучший способ. Я часто использую Flexbox для аккуратного совмещения небольших шаблонов; например, выравнивание значка рядом с текстом, выравнивание по базовой линии двух элементов с разными размерами шрифта или выравнивание полей и кнопок формы должным образом.Если вы изо всех сил пытаетесь заставить что-то хорошо сочетаться с vertical-align , то, возможно, попробуйте выполнить эту работу с помощью Flexbox. Помните, что вы также можете создать встроенный гибкий контейнер, если хотите, с помощью дисплея : inline-flex .

См. Пример inline-flex Pen от Рэйчел Эндрю.

См. Пример Inline-Flex Pen от Рэйчел Эндрю.

Нет причин не использовать Flexbox или даже Grid для крошечных макетов. Они не только для больших фрагментов макета. Попробуйте разные доступные вам вещи и посмотрите, что работает лучше всего.

Люди часто очень хотят знать, как правильно или неправильно поступать. На самом деле часто нет правильного или неправильного; Небольшая разница в вашем шаблоне может означать, что Flexbox работает лучше всего, в противном случае вы бы использовали vertical-align .

Заключение

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

  1. Вы выравниваете текст или встроенный элемент? Если это так, вам нужно использовать text-align , vertical-align и line-height .
  2. У вас есть элемент или элементы, которые нужно выровнять по центру страницы или контейнера? Если это так, сделайте контейнер гибким, затем установите align-items: center и justify-content: center .
  3. Для макетов сетки свойства, начинающиеся с align-, работают в направлении блока; те, которые начинаются с , оправдывают - работают в прямом направлении.
  4. Для макетов Flex свойства, начинающиеся с align-, работают на поперечной оси; те, которые начинаются с , оправдывают - работают на главной оси.
  5. Свойства justify-content и align-content распределяют дополнительное пространство. Если у вас нет лишнего места в гибком или сеточном контейнере, они ничего не сделают.
  6. Если вы думаете, что вам нужно justify-self в Flexbox, то использование автоматического поля, вероятно, даст вам шаблон, который вам нужен.
  7. Вы можете использовать Grid и Flexbox вместе со свойствами выравнивания для небольших заданий по макету, а также для основных компонентов — экспериментируйте!

Для получения дополнительной информации о выравнивании см. Следующие ресурсы:

(il)

CSS Box Alignment — CSS: Cascading Style Sheets

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

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

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

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

Следующие примеры демонстрируют, как некоторые свойства выравнивания блока применяются в сетке и Flexbox.

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

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

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

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

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

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

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

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

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

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

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

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

Субъект выравнивания

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

Контейнер выравнивания

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

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

Резервное выравнивание

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

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

  • Позиционное выравнивание : указание положения объекта выравнивания по отношению к его контейнеру выравнивания.
  • Базовое выравнивание : Эти ключевые слова определяют выравнивание как отношение между базовыми линиями множества субъектов выравнивания в контексте выравнивания.
  • Распределенное выравнивание : Эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

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

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

  • центр
  • начало
  • конец
  • самозапуск
  • саморез
  • flex-start только для Flexbox
  • гибкий конец только для Flexbox
  • слева
  • правый

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

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

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

Выравнивание базовой линии

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

  • базовый
  • первая базовая
  • последняя базовая

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

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

Распределенное выравнивание

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

  • растяжка
  • расстояние между
  • пространство вокруг
  • равномерно

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

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

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

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

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

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

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

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

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

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

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

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

Свойства CSS

Глоссарий

выравнивание текста | CSS-уловки

Свойство text-align в CSS используется для выравнивания внутреннего содержимого блочного элемента.

  п {
  выравнивание текста: центр;
}

Это традиционные значения для выравнивания текста:

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

«Контент» используется здесь как термин вместо «текст», потому что, хотя выравнивание текста определенно влияет на текст, оно влияет на все элементы inline или inline-block в этом контейнере.

В CSS3 также есть два новых значения: start и end. Эти значения упрощают поддержку нескольких языков. Например, английский — язык с письмом слева направо (ltr), а арабский — язык с письмом справа налево (rtl).Использование «правого» и «левого» для значений слишком жестко и не адаптируется при изменении направления. Эти новые значения действительно адаптируются:

  • start — То же, что «left» в ltr, то же самое, что «right» в rtl.
  • конец — То же, что «right» в ltr, то же самое, что «left» в rtl.

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

В спецификации есть несколько вещей, которые пока не поддерживаются браузером. Одним из них является значение «start end», которое выравнивает первую строку, как если бы она была «start», и любые последующие строки, как если бы она была «end». Другой дает значение в виде строки, например выравнивание текста: "." Начните; Текст будет выровнен по первому вхождению этой , чтобы выровнять столбец чисел по десятичной запятой.

Примеры

Этот текст выровнен по левому краю.

Этот текст выровнен по правому краю.

Я в центре!

Я оправдан. Я заполняю пространство точно (кроме последней строки), даже если мне иногда приходится немного растягиваться.

Я наследую мировоззрение своего родителя. В данном случае это означает левый.

Прочие ресурсы

Сопутствующие объекты

Поддержка браузера

Для левого, правого, центрального, выравнивания:

Хром Safari Firefox Opera IE Android iOS
Любая любое любое 3.5+ 3+ любое любое

Для начала и конца значения:

Хром Safari Firefox Opera IE Android iOS
Любая 3.1+ 3. 6+ Нет Нет любое любое

Центрирование в CSS: полное руководство

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

  .link {
  padding-top: 30 пикселей;
  padding-bottom: 30 пикселей;
}

См. Перо с вертикальным центрированием текста Криса Койера (@chriscoyier) на CodePen.

Если отступы по какой-то причине не подходят, и вы пытаетесь центрировать какой-то текст, который, как вы знаете, не будет переноситься, есть уловка: сделать высоту строки равной высоте центрировать текст .

  .center-text-trick {
  высота: 100 пикселей;
  высота строки: 100 пикселей;
  белое пространство: nowrap;
}

См. Pen Centering a line with line-height от Криса Койера (@chriscoyier) на CodePen.

Равное заполнение сверху и снизу может дать эффект центрирования для нескольких строк текста, но если это не сработает, возможно, элемент, в котором находится текст, может быть ячейкой таблицы, буквально или настроен так, чтобы вести себя как одна с CSS. В этом случае свойство vertical-align обрабатывает это, в отличие от того, что оно обычно делает, а именно обработки выравнивания элементов, выровненных по строке. (Подробнее об этом.)

См. Текст «Центрирование пера» (вроде) с помощью Padding Криса Койера (@chriscoyier) на CodePen.

Если нет чего-то табличного, возможно, вы могли бы использовать flexbox? Один гибкий дочерний элемент может быть довольно легко центрирован в гибком родительском элементе.

  .flex-center-вертикально {
  дисплей: гибкий;
  justify-content: center;
  flex-direction: столбец;
  высота: 400 пикселей;
}

См. Перо с вертикальным центром в нескольких строках текста с помощью Flexbox от Криса Койера (@chriscoyier) на CodePen.

Помните, что это действительно важно, только если родительский контейнер имеет фиксированную высоту (px,% и т. Д.), Поэтому контейнер здесь имеет высоту.

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

  .ghost-center {
  положение: относительное;
}
.ghost-center :: before {
  содержание: "";
  дисплей: встроенный блок;
  высота: 100%;
  ширина: 1%;
  вертикальное выравнивание: по центру;
}
.ghost-center p {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}

См. Многострочный текст Pen Ghost Centering от Криса Койера (@chriscoyier) на CodePen.

CSS Центральное, горизонтальное и вертикальное выравнивание

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

Выравнивание текста

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

  h2 {
    выравнивание текста: центр;
}
п {
    выравнивание текста: слева;
}

См. Руководство по CSS-тексту, чтобы узнать больше о форматировании текста.

Выравнивание по центру с использованием свойства поля

Выравнивание по центру элемента уровня блока является одним из наиболее важных следствий свойства CSS margin . Например, контейнер

можно выровнять по центру по горизонтали, установив для левого и правого полей значение auto .

  div {
    ширина: 50%;
    маржа: 0 авто;
}

Правила стиля в приведенном выше примере по центру выравнивают элемент

по горизонтали.

Примечание: Значение auto для свойства margin не будет работать в Internet Explorer 8 и более ранних версиях, если не указан .

Выравнивание элементов с помощью свойства position

CSS позиция в сочетании со свойством left , right , top и bottom можно использовать для выравнивания элементов относительно области просмотра документа или содержащего родительский элемент.

  .up {
    позиция: абсолютная;
    верх: 0;
}
.вниз {
    позиция: абсолютная;
    внизу: 0;
}

Чтобы узнать больше о позиционировании элементов, см. Руководство по позиционированию CSS.

Выравнивание по левому и правому краю с использованием свойства float

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

Следовательно, если элемент перемещается влево, содержимое будет перемещаться по его правой стороне. И наоборот, если элемент перемещается вправо, содержимое будет перемещаться по его левой стороне.

  div {
    ширина: 200 пикселей;
    плыть налево;
}

Сброс поплавков

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

Вы можете видеть, что элемент

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

Исправление свернутого родительского элемента

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

Решение 1. Плавайте контейнер

Самый простой способ решить эту проблему — поместить родительский элемент в плавающее положение.

  .container {
    плыть налево;
    фон: # f2f2f2;
}

Предупреждение: Это исправление будет работать только в ограниченном числе обстоятельств, поскольку перемещение родительского объекта может привести к неожиданным результатам.

Решение 2. Использование пустого Div

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

  .clearfix {
    ясно: оба;
}
/ * фрагмент HTML-кода * /

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

Решение 3. Использование псевдоэлемента: after

Псевдоэлемент : after в сочетании со свойством content довольно широко использовался для решения проблем с очисткой плавающих точек.

  .clearfix: after {
    содержание: ".";
    дисплей: блок;
    высота: 0;
    ясно: оба;
    видимость: скрыта;
}

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

Предупреждение: Internet Explorer до IE7 не поддерживает псевдоэлемент : after . Однако IE8 поддерживает, но требует объявления .

CSS свойство выравнивания текста

Синтаксис

селектор {text-align: value ;}

    Значение
  • указывается с помощью одного из следующих ключевых слов: слева, справа, по центру, по ширине, или наследуют .
Использование

Свойство text-align используется для задания горизонтального выравнивания содержимого встроенного уровня, такого как текст и изображения.

Это свойство задается с помощью ключевого слова в соответствии с синтаксисом, показанным выше.


Пример CSS: для свойств text-align задано значение справа , по ширине и по центру .
 h2 {выравнивание текста: справа;}
  p {выравнивание текста: justify;}
  div {выравнивание текста: центр;}
Ключевые слова
  • слева — выравнивает содержимое по левому краю.
  • справа — выравнивает содержимое по правому краю.
  • center — Центрирует содержимое.
  • выравнивание — Если возможно, левая и правая стороны выравниваются путем регулировки ширины содержимого.Например, ширину строки текста можно регулировать, изменяя интервал между словами.
  • inherit — ключевое слово inherit используется для указания того, что значение этого свойства должно быть взято из родительского элемента. Если наследование используется с корневым элементом, то будет использоваться начальное значение для этого свойства.
Относится к Блок-контейнеры
Унаследовано Есть
Начальное значение Зависит от значения свойства direction.Если свойство direction установлено на ltr , то текст будет выровнен по левой стороне. Если свойство direction установлено на rtl , то текст будет выровнен по правой стороне.

CSS: свойство text-align

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием text-align с синтаксисом и примерами.

Описание

Свойство CSS text-align определяет, как текст элемента выравнивается внутри его родительского блочного элемента.

Синтаксис

Синтаксис CSS-свойства text-align:

.
  выравнивание текста: значение;

Параметры или аргументы

значение

Выравнивание текста. Это может быть одно из следующих значений:

Элемент
Значение Описание
левый Текст с выравниванием по левому краю
div {text-align: left; }
правый Текст с выравниванием по правому краю
div {text-align: right; }
центр Текст по центру
div {text-align: center; }
оправдать Текст выровнен по ширине (т. Е. Выровнять левый и правый края абзаца)
div {text-align: justify; }
начало Если направление слева направо, текст будет выровнен по левому краю.
Если направление справа налево, текст будет выровнен по правому краю.
div {выравнивание текста: начало; }
конец Если направление слева направо, текст будет выровнен по правому краю.
Если направление справа налево, текст будет выровнен по левому краю.
div {выравнивание текста: конец; }
наследовать унаследует выравнивание текста от своего родительского элемента
div {выравнивание текста: наследование; }

Примечание

  • Свойство text-align выравнивает только встроенное содержимое (т.е. текст) элемента в пределах его родительского блочного элемента.
  • Свойство text-align выравнивает не сам блочный элемент, а только встроенное содержимое.

Совместимость с браузером

Свойство CSS text-align имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Телефон
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Пример

Мы обсудим свойство text-align ниже, исследуя примеры использования этого свойства в CSS.

Использование центра

Давайте посмотрим на пример CSS выравнивания текста, где мы центрируем текст.

  div {выравнивание текста: центр; }

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

.

Использование выравнивания по левому краю

Теперь давайте рассмотрим пример CSS с выравниванием текста, в котором мы выравниваем текст по левому краю.

  div {выравнивание текста: слева; }

В этом примере CSS с выравниванием текста мы выровняли текст в теге

по левому краю.

Использование выравнивания по правому краю

Давайте посмотрим на пример CSS с выравниванием текста, где мы выравниваем текст по правому краю.

  div {выравнивание текста: справа; }

В этом примере CSS с выравниванием текста мы выровняли текст в теге

по правому краю.

.

No related posts.

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

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