Выравнивание css элемента: Горизонтальное и вертикальное выравнивание

Содержание

Выравнивание элементов во Flex контейнере - CSS

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

Для центрирования элемента по перекрёстной оси (в данном случае - вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае - горизонтально), используется свойство justify-content.

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

В этом руководстве рассматриваются следующие свойства:

  • justify-content — управляет выравниванием элементов по главной оси.
  • align-items — управляет выравниванием элементов по перекрёстной оси.
  • align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
  • align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

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

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

 

Выравнивание одного элемента при помощи 

align-self

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

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

first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

 

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

 

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

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

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей - больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

 

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

 

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

 

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

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

 

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction

 — например установите row-reverse вместо row.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

 

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство

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

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

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (

d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

 

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

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

column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

  • Выравнивание Коробки
  • Выравнивание Коробки в Flexbox (Гибкая Коробка)
  • Выравнивание Коробки в Grid Layout (Макет Сетки)

Выравнивание полей 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: элемент в центре - dr.Brain

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

Ниже мы разберем несколько способов выравнивания блока по центру.

Text-align

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

Как это делается?
  1. вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
  2. задайте для этого (родительского) элемента CSS-свойство text-align: center,
  3. для выравниваемого элемента создайте свойство display: inline-block.

В примере для синего квадрата есть блок-обертка blue-square-container, для которого определено выравнивание текста по центру text-align: center, а для самого квадрата есть свойство display: inline-block.

Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.

В свою очередь для inline-block элемента:

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

Margin: auto

Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: margin: 0 auto). В этом случае не имеет значения: есть ли родительский элеменет и что с ним происходит.

Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.

margin: 0 auto - короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.

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

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

Еще один интересный прием - установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).

Абсолютное позиционирование

Элемент с абсолютным позиционированием можно разместить в любом месте страницы, но с одной особенностью.

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

Почему это важно?

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

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

  1. установить элементу свойство position: absolute,
  2. применить свойство left: 50%,
  3. установить margin-left равным половине ширины элемента с отрицательным значением.

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

Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.

Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.

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

Transform/translate

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

Проделаем это с красным квадратом из второго примера (смотри выше).

Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.

Устанавливая верхний внешний отступ равным 50%: margin-top: 50%, мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.

Вот почему нам нужно еще одно свойство, которое называется transform

С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).

Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…

Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.

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

Flexbox

Flexbox - одна из популярных моделей позиционирования и выравнивания элементов на странице.

Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy - это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.

Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:

  1. HTML, body и родительский контейнер должны иметь высоту 100%,
  2. для родителського контейнера нужно установить display: flex,
  3. так же для родительского контейнера нужно установить align-items: center,
  4. еще для родительского контейнера нужно установить justify-content: center.

Устанавливая display: flex, мы создаем flex-контейнер.

align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.

justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении - горизонтальном.

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


Спасибо за внимание.


Перевод статьи Stephen Sun “How to center things with style in CSS “.

CSS: выравнивание элементов внутри div



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

Итак, у меня есть что-то вроде:

#left-element {
    margin-left: 9px;
    margin-top: 3px;
    float:left;
    width: 13px;
}

#middle-element {
    margin:0 auto;
    text-align: center;
    width: 300px;
}

#right-element {
    float:right;
    width: 100px;
}

Мой html выглядит так:

   <div>
        <div>
            <img src="images/left_element.png" alt="left"/>
        </div>
        <div>
            I am the text inside the middle element
        </div>
        <div>
            I am the text in right element
        </div>
    </div>

Есть идеи?

Спасибо!

css positioning html
Поделиться Источник luqita     30 апреля 2011 в 13:54

4 ответа


  • Кроссбраузерное выравнивание div по центру с помощью CSS

    Какой самый простой способ выровнять div , чье положение relative по горизонтали и вертикали, используя CSS ? Ширина и высота div неизвестны, то есть он должен работать для каждого измерения div и во всех основных браузерах. Я имею в виду выравнивание по центру. Я думал сделать горизонтальное...

  • Выравнивание по вертикали входных элементов в div

    Я сделал поиск на SO, чтобы узнать, как я могу выровнять по вертикали входные элементы в div. Этот div находится внутри формы. Большинство вопросов, элементы формы имеют много <div> ' s для каждого элемента или тег <br> для этого. Вертикальное выравнивание входных элементов...



4

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

#container {
  overflow: hidden;
  width: 100%; /* for good measure */
}

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

<div>
    <div>
        <img src="images/left_element.png" alt="left"/>
    </div>
    <div>
        I am the text in right element
    </div>
    <div>
        I am the text inside the middle element
    </div>
</div>

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

#container {
  overflow: hidden;
  width: 100%;
  min-height: 36px; /* Remember absolute positioning is outside the page flow! */
  position: relative;
}
#left-element {
  position: absolute;
  left: 9px;
  top: 3px;
  width: 13px;
}
#middle-element {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}
#right-element {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}

Поделиться lpd     30 апреля 2011 в 14:32



1

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

CSS:

<style>
    #container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
        #left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
        #middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
        #right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>

HTML:

<div>
    <div>Left Element</div>
    <div>Middle Element</div>
    <div>Right Element</div>
</div>

Поделиться Jonathan Miller     30 апреля 2011 в 14:06



1

Проблема заключается именно в том, что средний div имеет заданную ширину, но не плавает, то есть он все еще является элементом уровня блока. Даже если сам div не проходит по всей ширине контейнера, он все равно рассматривается как таковой. Вам нужно сделать 2 вещи-поплавать в среднем div, затем очистить поплавки, чтобы контейнер рос с высотой дочерних divs. Метод clearfix является предпочтительным, поскольку он не вызывает проблем со свойствами CSS3, которые естественным образом выходят за пределы элемента, к которому они применяются (box-shadow, text-shadow и т. д.).

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Поделиться Brent Friar     30 апреля 2011 в 14:53


  • Как установить вертикальное выравнивание элементов, существующих в теге div, по центру с css?

    Я пытаюсь установить вертикальное выравнивание элементов, существующих в теге div, по центру. Пожалуйста, совет <div class=new_div> <h4>نام من</h4> <p>توضیحات من</p> <button class=btn btn-primary>بیشتر ...</button> </div> css .new_div { position:...

  • css вертикальное выравнивание вертикальное выравнивание внутри

    Моя цель состоит в том, чтобы создать 3 вертикально выровненных div, где один div имеет вертикальную полосу высоты родителя ( border-right ). родитель может иметь фиксированную высоту, что, в свою очередь, должно позволить использовать вертикальное выравнивание с помощью css (я знаю, что flexbox...



0

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

.main-nav {
  text-align: center;
  padding: 2em 3em;
  background: #f4f4f4;
}

#logo {
  margin: 0;
  width: 50px;
  float: left;
  margin-top: 18px;
}

#logo-link {
  float: left;
  display: inline-block;
}

.name {
  display: inline-block;
}

.nav {
  float: right;
  margin-top: 18px;
}
.nav li {
  float: left;
  margin-right: 15px;
  margin-top: 5px;
}

.nav li:last-child {
  margin-right: 0;
}
<header>
      <div>
        <a href="index.html"><img src="img/site-logo.svg" alt="Munchies"></a>

          <div>
            <h2>The Munchies Family Site</h2>
            <h3>Designer</h3>
          </div>

        <nav>
          <ul>
            <li><a href="index.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

сильный текст

Поделиться Samgraphics     17 ноября 2017 в 04:12


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


Как выровнять div внутри элемента td с помощью класса CSS

Он работает с этим способом <td align=center> Но я хочу использовать класс CSS. Я определил класс таким образом, но не повезло td { vertical-align: middle; text-align: center; margin-left:...


вертикальное выравнивание изображения внутри div

Я хочу установить вертикальное выравнивание изображения внутри div. Я использую img { vertical-align:middle} но это не работает.


Вертикальное выравнивание элементов внутри UITableViewCell

Можно ли программно установить вертикальное выравнивание (середину) всех элементов внутри прототипной ячейки UITableView (UILabel, UIImageView)? Я хотел бы установить его на середину.


Кроссбраузерное выравнивание div по центру с помощью CSS

Какой самый простой способ выровнять div , чье положение relative по горизонтали и вертикали, используя CSS ? Ширина и высота div неизвестны, то есть он должен работать для каждого измерения div и...


Выравнивание по вертикали входных элементов в div

Я сделал поиск на SO, чтобы узнать, как я могу выровнять по вертикали входные элементы в div. Этот div находится внутри формы. Большинство вопросов, элементы формы имеют много <div> ' s для...


Как установить вертикальное выравнивание элементов, существующих в теге div, по центру с css?

Я пытаюсь установить вертикальное выравнивание элементов, существующих в теге div, по центру. Пожалуйста, совет <div class=new_div> <h4>نام من</h4> <p>توضیحات من</p>...


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

Моя цель состоит в том, чтобы создать 3 вертикально выровненных div, где один div имеет вертикальную полосу высоты родителя ( border-right ). родитель может иметь фиксированную высоту, что, в свою...


Почему бы выравнивание текста выравнивание текста в div?

Выравнивание текста в div выполняется через text-align . Обычно он работает нормально: <div style=text-align:right;border:1px solid red> this goes to the right </div> У меня есть кусок...


Измените класс css после заданного количества элементов внутри div

Мне нужно изменить значение css display элементов внутри div с помощью jQuery. Что мне нужно сделать, так это получить количество элементов внутри элемента div. (Экс - Li-элементы). Если количество...


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

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

CSS: выравнивание элемента списка как по вертикали, так и по горизонтали



Заголовок моей страницы имеет смещенный элемент <li> . Вот скриншот:

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

Я могу выровнять элемент <li>

  • горизонтально с style="float:right"
  • вертикально с style="vertical-align:middle" .

..Но не в одно и то же время. Основываясь на подобном вопросе , я ожидал, что это сработает:

style="float:right; vertical-align:middle"

Это не.

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

Вот соответствующий код html-thymeleaf:

    <div th:fragment="header">
        <nav>
            <ul>
                <li><a href="/"><h3>Personal Expense Tracker</h3></a></li>

                <li th:inline="text"><a href="/logout">[[(${user != null ? 'Logout ' + user : ''})]]</a></li>

            </ul>
        </nav>
    </div>

Вот соответствующий код css:

nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
html css vertical-alignment
Поделиться Источник Atte Juvonen     02 января 2017 в 02:51

3 ответа


  • Как центрировать div как по вертикали, так и по горизонтали

    Я хотел бы центрировать текст как по вертикали, так и по горизонтали apple. Я перепробовал все уже предложенные решения (внутренний div, вертикальное выравнивание, margin:auto...) Я просто не понимаю этого. http://jsfiddle.net/0jkdLr84/3 / Я думаю, что проблема находится ниже. #distance {...

  • Центрирование изображения автоматического размера как по горизонтали, так и по вертикали

    Я провел много поисков и нашел довольно много ответов на эту проблему, но ни один из них, казалось, не работал, когда я попробовал их в своей конкретной установке. Вот JSFiddle проблемы, которую я пытаюсь решить: http://jsfiddle.net/kr394ye2/1 / .classA { background-color: yellow; width: 50px;...



1

С кодом, который вы добавили..

Используя flexbox, вы можете сделать это:

nav {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  display: block;
  margin: 0;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}

nav ul li {
  margin: 0;
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav > ul > li > a:hover {
  background-color: #111;
}
<div th:fragment="header">
  <nav>
    <ul>
      <li><a href="/"><h3>Personal Expense Tracker</h3></a></li>

      <li th:inline="text" ><a href="/logout">Log out</a></li>

    </ul>
  </nav>
</div>

Поделиться pol     02 января 2017 в 02:59



1

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

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

Желаю удачи!

.container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 50%;
  max-width: 1000px;
  height: 100px;
  background: grey;
}

.element {
  position: absolute;
  display: block;
  width: 50%;
  height: 50px;
  background: red;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25%;
}
<ul>
  <li></li>
</ul>

Поделиться Stephen Bennett     02 января 2017 в 03:28



0

Вы должны дать height или line-height элементу (или в каком-то случае родительский элемент не имеет высоты), поэтому vertical-align:middle не будет работать, потому что высоты нет. Сначала дайте высоту элементу, который вы хотите установить вертикально посередине, если он не работает, дайте высоту родительскому элементу.

Поделиться Maharshi     02 января 2017 в 03:47



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


Выравнивание изображения по центру как по вертикали, так и по горизонтали

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


Центрирование пролета по вертикали и горизонтали внутри элемента списка

У меня возникли проблемы с центрированием пролета по горизонтали и вертикали в элементе списка. Он просто торчит в левом верхнем углу. Вот мой markup: <ul id=folders> <li...


Сделайте так, чтобы текст появлялся в центре SPAN по горизонтали и вертикали

Я хочу отобразить некоторый текст в DIV, который должен появиться в центре SPAN-как по вертикали, так и по горизонтали. Это мой jsfiddle- http://jsfiddle.net/8Syqv/13 / HTML: <span>something...


Как центрировать div как по вертикали, так и по горизонтали

Я хотел бы центрировать текст как по вертикали, так и по горизонтали apple. Я перепробовал все уже предложенные решения (внутренний div, вертикальное выравнивание, margin:auto...) Я просто не...


Центрирование изображения автоматического размера как по горизонтали, так и по вертикали

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


CSS : самый простой способ центрирования элементов как по горизонтали, так и по вертикали с помощью flex?

Как сделать отзывчивую коробку с элементами, центрированными как по горизонтали, так и по вертикали внутри нее, используя css flex?


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

Я сделал div фиксированной высоты и хочу, чтобы текст выравнивался как по вертикали, так и по горизонтали в div. Я попробовал использовать margin:auto и выравнивание текста, но это не помогло. Я...


Выравнивание изображения по центру внутри div по горизонтали и вертикали

В настоящее время у меня есть header div, а внутри него- header-top и header-bottom . Я пытаюсь разместить свой логотип на top-header и выровнять его по вертикали и горизонтали. Логотип...


Центрирование div по вертикали и горизонтали

Есть ли способ центрировать .polygon_container и .polygon по вертикали и горизонтали? Кроме того, есть ли возможность сделать его размер отзывчивым, как тег <img> ниже? http:/ /...


HTML/CSS: центрируйте содержимое как по горизонтали, так и по вертикали

Я хочу центрировать свой контент как по вертикали, так и по горизонтали на странице. Я никак не мог заставить его работать. Кто-нибудь здесь может помочь? Спасибо. <style type = text/css>...

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

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

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.

У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height. Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.

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

Взгляните на приведенный ниже пример.

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

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

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

Начнем с основ выравнивания по вертикали CSS div:

  • position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
  • position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
  • position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
  • position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

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

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

Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

Можно использовать flexbox. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Используя flexbox расположение, можно центрировать несколько блоков.

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

Данная публикация является переводом статьи «CSS Vertical Align for Everyone (Dummies Included)» , подготовленная редакцией проекта.

Vertical align CSS - выравнивание по вертикали в помощью CSS

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

В данной статье мы рассмотрим:

  • свойство vertical-align, как и когда оно работает;
  • метод центрирования по вертикали элемента с известной высотой;
  • центрирование по вертикали элементов с изменяемой высотой.

Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline, inline-block или table-cell. Оно принимает в качестве значений число, проценты или ключевое слово.

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

Ключевые значения vertical-align могут быть следующими:

  • baseline;
  • sub;
  • super;
  • text-top;
  • text-bottom;
  • middle;
  • top;
  • bottom.

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

Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align. У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

<div> 
  <img src="http://placebacn.com/200/400"> 
  <h3>grilled bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/300"> 
  <h3>tasty bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/200"> 
  <h3>crispy bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/350"> 
  <h3>bacon</h3> 
</div>

Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom. Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

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

<div> 
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
  aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt
  dolores, consequatur dolorem, dignissimos debitis distinctio.
  Voluptas eligendi fuga voluptatem eos. 
  </div>
</div>

Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру.

Применив к контейнеру свойство position: relative, можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

.container {
  position: relative;
  background: #444;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 400px;
  height: 200px;
  margin: -100px 0 0 -200px;

  color: #fff;
  background: #cc3f85;
}

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

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

Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно получить, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.

Главный приём здесь — создать невидимый элемент (используя псевдоэлемент), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle. После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center. Затем центрировать блок по горизонтали, используя text-align: center:

.container {
  height: 400px;
  margin: 20px;
  background: #444;
  font-size: 0;
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 50%;
  padding: 2em;
  border: 1px solid #000;
  background: #cc3f85;
  font-size: 1rem;
  vertical-align: middle;
}

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

Данная публикация является переводом статьи «Vertical-Alignment in CSS» , подготовленная редакцией проекта.

Комбинаторы CSS


Комбинаторы CSS

Комбинатор - это то, что объясняет взаимосвязь между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простым селекторы, мы можем включить комбинатор.

В CSS есть четыре разных комбинатора:

  • Селектор потомков (пробел)
  • дочерний селектор (>)
  • Селектор соседних братьев (+)
  • общий родственный селектор (~)

Селектор потомков

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.

В следующем примере выбираются все элементы

внутри элементов

:


Селектор детей (>)

Дочерний селектор выбирает все элементы, которые являются дочерними элементами указанный элемент.

В следующем примере выбираются все элементы

, которые дочерние элементы

элемент:



Селектор соседних братьев и сестер (+)

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

Родственные элементы должны иметь один и тот же родительский элемент, и «смежный» означает "сразу после".

В следующем примере выбирается первый элемент

, который помещается сразу после элементов

:


Общий селектор братьев и сестер (~)

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

В следующем примере выбираются все элементы

, которые являются родственниками элементов

:


Проверьте себя упражнениями!


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

Селектор Пример Описание примера
элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает первый элемент

, который помещается сразу после элементов

элемент1 ~ элемент2 пол Выбирает каждый элемент
    , которому предшествует элемент



CSS свойство align-items


Пример

Центрировать выравнивания для всех элементов гибкого элемента

:

div {
дисплей: гибкий;
align-items: center;
}

Попробуй сам "

Определение и использование

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

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

Значение по умолчанию: растяжка
Унаследовано:
Анимация: нет. Подробнее о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.alignItems = "центр" Попытайся

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

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

Числа, за которыми следует -webkit-, указывают первую версию, которая работала с префиксом.

Имущество
align-items 21.0 11,0 20,0 9,0
7,0 -вебкит-
12,1


Синтаксис CSS

выровнять элементы: растяжение | центр | гибкий старт | гибкий конец | базовая линия | начальный | наследование;

Стоимость недвижимости

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

Связанные страницы

Ссылка CSS: свойство align-content

Ссылка CSS: свойство align-self

Ссылка на HTML DOM: свойство alignItems



CSS: центрирующие объекты

CSS: центрирующие объекты

См. Также указатель всех подсказок.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений. По факту, существует три вида центрирования:

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

Центрирующие строки текста

Самый распространенный и (следовательно) самый простой тип центрирования - это строк текста в абзаце или заголовке. CSS имеет свойство text-align для этого:

П {выравнивание текста: центр}
h3 {text-align: center} 

отображает каждую строку в виде буквы P или h3 с центром между ее поля, например:

Все строки в этом абзаце по центру между полями абзаца благодаря значению 'center' свойства CSS 'text-align'.

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

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

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...

Это скорее ...

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

Это также способ центрировать изображение: превратить его в блок свой собственный и примените к нему свойства поля. Например:

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
... 

Следующее изображение отцентрировано:

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

CSS level 2 не имеет свойства для центрирования вещей вертикально.Вероятно, он будет на уровне CSS 3 (см. Ниже). Но даже в CSS2 вы можете центрировать блоки по вертикали, комбинируя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок форматироваться как ячейка таблицы, потому что содержимое таблицы ячейку можно центрировать по вертикали .

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

Этот небольшой абзац ...

Этот маленький абзац расположен по центру вертикально.

Вертикальное центрирование в CSS, уровень 3

CSS level 3 предлагает другие возможности. В это время (2014 г.) хороший способ центрировать блоки по вертикали без использования абсолютного позиционирование (которое может привести к наложению текста) все еще ниже обсуждение.Но если вы знаете, что перекрывающийся текст не будет проблема в вашем документе, вы можете использовать свойство 'transform', чтобы центрировать абсолютно позиционированный элемент. Например:

Этот абзац расположен по центру по вертикали.

Для документа, который выглядит так:

Этот абзац…

таблица стилей выглядит так:

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * / 

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

  1. Сделайте контейнер относительно позиционированным, который объявляет, что это контейнер для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его наполовину в емкость с надписью «верх: 50%».(Примечание что 50% 'здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх вдвое. высота. ('50% 'в' translate (0, -50%) 'обозначает высоту сам элемент.)

Недавно (примерно с 2015 г.) стала еще одна техника доступен в нескольких реализациях CSS. Он основан на новом Ключевое слово flex для свойства display. Это ключевое слово имеет в виду для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает от использования его в документе, если документ имеет правильная структура.

Этот абзац расположен по центру по вертикали.

таблица стилей выглядит так:

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

Вертикальное и горизонтальное центрирование в CSS, уровень 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и вертикально одновременно.

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

Желтый фон показывает, что абзац на самом деле только настолько, насколько велико его содержание. Мы предполагаем ту же наценку, что и перед:

По центру!

Таблица стилей аналогична предыдущему примеру в отношении до вертикального центрирования.Но теперь мы переместим элемент наполовину по всему контейнеру, с 'left: 50%', и в то же время время переместите его влево на половину его собственной ширины в 'translate' трансформация:

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

В следующем примере ниже объясняется, почему "margin-right: -50%" нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

с этой таблицей стилей:

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

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

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае браузера это означает окно браузера). Так центрировать элемент в области просмотра очень просто.Вот полный пример. (В этом примере используется синтаксис HTML5.)


  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        заполнение: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
    

Красиво по центру

Этот текстовый блок центрирован по вертикали.

И по горизонтали, если окно достаточно широкое.

Вы можете увидеть результат в отдельном документ.

Поле «margin-right: -50%» необходимо для компенсации «left: 50% ». Правило "влево" уменьшает доступную ширину элемента. на 50%. Таким образом, средство визуализации попытается создать строки, которые больше не чем на половину ширины контейнера. Сказав, что право маржа элемента дальше вправо на ту же величину, максимальная длина строки снова равна ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение состоит из одного линия, когда окно достаточно широкое. Только когда окно слишком узкий для всего предложения будет ли приговор разбит несколько строк. Когда вы удаляете 'margin-right: -50%' и изменяете размер снова окно, вы увидите, что предложения будут разбиты уже тогда, когда ширина окна в два раза превышает ширину текстовых строк.

(Использование 'translate' для центрирования в области просмотра было первым предложенный «Чарли» в ответе на переполнение стека.)

Выравнивание блока CSS - CSS: каскадные таблицы стилей

Модуль 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 , что позволяет нам сразу установить эти свойства:

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

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

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

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

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

Свойства CSS

Глоссарий

align-content - CSS: каскадные таблицы стилей

Свойство CSS align-content устанавливает распределение пространства между элементами содержимого и вокруг них вдоль поперечной оси гибкого блока или блока сетки ось.

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

Это свойство не влияет на однострочные гибкие контейнеры (т. Е. С flex-wrap: nowrap ).

 

выровнять контент: центр;
выровнять контент: начало;
выровнять контент: конец;
выровнять контент: гибкий старт;
выровнять контент: гибкий конец;


выровнять контент: нормальный;


выровнять контент: базовая линия;
align-content: первая базовая линия;
align-content: последняя базовая линия;


выровнять контент: пробел между;
выровнять контент: пространство вокруг;
выровнять содержимое: равномерно по пространству;
выровнять контент: растянуть;


align-content: безопасный центр;
align-content: небезопасный центр;


выровнять контент: наследовать;
выровнять контент: начальный;
выровнять контент: отключено;
  

Значения

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

последний исходный уровень
Задает участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовых линий.
Резервное выравнивание для первой базовой линии - это начало , для последней базовой линии - конец .
промежуток между
Элементы равномерно распределены в контейнере для выравнивания вдоль поперечной оси. Расстояние между каждой парой соседних элементов одинаковое. Первый элемент находится заподлицо с начальным краем контейнера выравнивания по поперечной оси, а последний элемент находится заподлицо с конечным краем контейнера выравнивания по поперечной оси.
пространство вокруг
Элементы равномерно распределены в контейнере для выравнивания вдоль поперечной оси. Расстояние между каждой парой соседних элементов одинаковое. Пустое пространство перед первым и после последнего элемента равно половине пространства между каждой парой соседних элементов.
равномерно
Элементы равномерно распределены в контейнере для выравнивания вдоль поперечной оси. Расстояние между каждой парой смежных элементов, начальным краем и первым элементом, а также конечным краем и последним элементом, абсолютно одинаково.
растяжка
Если объединенный размер элементов вдоль поперечной оси меньше, чем размер контейнера выравнивания, любые элементы auto -size увеличивают свой размер одинаково (не пропорционально), при этом соблюдая ограничения, налагаемые параметром max-height. / max-width (или эквивалентная функциональность), чтобы комбинированный размер точно заполнял контейнер выравнивания вдоль поперечной оси.
сейф
Используется вместе с ключевым словом выравнивания.Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, вызывая потерю данных, элемент вместо этого выравнивается, как если бы режим выравнивания был начало .
небезопасно
Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и того, может ли произойти переполнение, которое вызывает потерю данных, заданное значение выравнивания соблюдается.

CSS

  #container {
  высота: 200 пикселей;
  ширина: 240 пикселей;
  выровнять контент: центр;
  цвет фона: # 8c8c8c;
}

.flex {
  дисплей: гибкий;
  flex-wrap: обертка;
}

.сетка {
  дисплей: сетка;
  столбцы-шаблон-сетки: повтор (автозаполнение, 50 пикселей);
}

div> div {
  размер коробки: рамка-рамка;
  граница: 2px solid # 8c8c8c;
  ширина: 50 пикселей;
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}

# item1 {
  цвет фона: # 8cffa0;
  минимальная высота: 30 пикселей;
}

# item2 {
  цвет фона: # a0c8ff;
  минимальная высота: 50 пикселей;
}

# item3 {
  цвет фона: # ffa08c;
  минимальная высота: 40 пикселей;
}

# item4 {
  цвет фона: # ffff8c;
  минимальная высота: 60 ​​пикселей;
}

# item5 {
  цвет фона: # ff8cff;
  минимальная высота: 70 пикселей;
}

# item6 {
  цвет фона: # 8cffff;
  минимальная высота: 50 пикселей;
  размер шрифта: 30 пикселей;
}

Выбрать {
  размер шрифта: 16 пикселей;
}

.строка {
  маржа сверху: 10 пикселей;
}
  

HTML

  
1
2
3
4
5
6
<выбор>
<выбор>

Результат

Поддержка в макете Flex

Таблицы BCD загружаются только в браузере

Поддержка в макете сетки

Таблицы BCD загружаются только в браузере

CSS Central, Horizontal and Vertical Alignment

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как выровнять содержимое элемента Div по нижнему краю

CSS позволяет нам выровнять содержимое элемента

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

Это очень просто, если вы выполните шаги, описанные ниже.

Давайте посмотрим на примере и попробуем обсудить каждую часть кода вместе.

Создать HTML¶

  • Создайте
    с классом main. Он включает три других элемента
    .
  • Поместите тег

    в первый

    , который имеет имя класса «column1», напишите в нем какое-то содержимое.
  • Второй
    имеет класс с именем "column2".
  • Третий
    имеет идентификатор с именем «дно».
  <тело>
  

W3docs

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.
Нижний блок содержимого

Добавить CSS¶

  • Используйте свойства границы, высоты, ширины и положения для стилизации «основного» класса. Свойство float определяет, с какой стороны контейнера должны быть размещены элементы. Свойство position определяет положение элемента в документе.
  • Установить цвет текста первого
    . В этом примере мы используем "шестнадцатеричное" значение цвета.
  • Используйте свойство text-align для выравнивания внутреннего содержимого блочного элемента.
  • Используйте свойства снизу и слева. Свойство bottom определяет нижнюю позицию элемента вместе со свойством position. Свойство left определяет левую позицию элемента вместе со свойством position.

Свойство float игнорируется, если элементы позиционируются абсолютно (позиция: абсолютная).

  .main {
  граница: 1px solid # 4287f5;
  высота: 180 пикселей;
  ширина: 500 пикселей;
  положение: относительное;
}

.column1 {
  цвет: # 4287f5;
  выравнивание текста: центр;
}

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

#Нижний {
  позиция: абсолютная;
  внизу: 0;
  слева: 0;
}  

Давайте объединим части кода и посмотрим, как он работает!

Пример выравнивания содержимого по левому нижнему краю: ¶

  

  
     Название документа 
    <стиль>
      .основной {
        граница: 1px solid # 4287f5;
        высота: 180 пикселей;
        ширина: 500 пикселей;
        положение: относительное;
      }
      .column1 {
        цвет: # 4287f5;
        выравнивание текста: центр;
      }
      .column2 {
        выравнивание текста: центр;
      }
      #Нижний {
        позиция: абсолютная;
        внизу: 0;
        слева: 0;
      }
    
  
  
    

W3docs

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.
Нижний блок содержимого
Попробуйте сами »

Результат

W3docs

Lorem Ipsum - это просто фиктивный текст, используемый в полиграфической и наборной индустрии.

Bottom Content Div

В следующем примере содержимое

выровнено по нижнему краю с правой стороны.

Пример выравнивания содержимого по правому нижнему краю: ¶

  

  
     Название документа 
    <стиль>
      .основной {
        граница: 1px solid # 4287f5;
        плыть налево;
        высота: 180 пикселей;
        ширина: 500 пикселей;
        положение: относительное;
      }
      .column1 {
        цвет: # 4287f5;
        выравнивание текста: центр;
      }
      .column2 {
        выравнивание текста: центр;
      }
      #Нижний {
        позиция: абсолютная;
        внизу: 0;
        справа: 0;
      }
    
  
  
    

W3docs

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.
Нижний блок содержимого
Попробуйте сами »

В нашем следующем примере содержимое

выровнено по низу по центру. Мы устанавливаем ширину нижнего
на «100%».

Пример выравнивания содержимого по центру снизу: ¶

  

  
     Название документа 
    <стиль>
      .основной {
        граница: 1px solid # 4287f5;
        плыть налево;
        высота: 180 пикселей;
        ширина: 500 пикселей;
        положение: относительное;
        выравнивание текста: центр;
      }
      .column1 {
        цвет: # 4287f5;
      }
      #Нижний {
        позиция: абсолютная;
        внизу: 0;
        ширина: 100%;
        цвет: #ffffff;
        цвет фона: синий;
        отступ: 15 пикселей 0;
      }
    
  
  
    

W3docs

Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.
Нижний блок содержимого
Попробуйте сами »

Давайте посмотрим на другой пример, где содержимое

выровнено по центру с помощью flexbox. Flexbox - это одномерный макет, что означает, что он размещает элементы в одном измерении за раз, либо в виде строки, либо в виде столбца, но не в обоих одновременно. В следующем примере мы используем свойство flex-direction со значением «столбец».Свойство flex-direction определяет основную ось гибкого контейнера и устанавливает порядок, в котором появляются гибкие элементы. Свойство justify-content выравнивает элементы, если они не используют все доступное пространство по горизонтали. Значение «space-between» используется со свойством justify-content, когда между строками элементов есть пробел.

Свойство justify-content должно использоваться со свойством отображения, установленным на «flex». Для выравнивания элементов по вертикали используйте свойство align-items.

Пример выравнивания содержимого по низу с помощью Flexbox: ¶

  

  
     Название документа 
    <стиль>
      основной {
        граница: 1 пиксель сплошного синего цвета;
        высота: 150 пикселей;
        дисплей: гибкий;
        flex-direction: столбец;
        justify-content: пробел между;
      }
      h3 {
        маржа: 0;
      }
    
  
  
    <основной>
      

Заголовок заголовка

Часть текста выравнивается по нижнему краю