Все, что вам нужно знать о выравнивании во Flexbox
Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew.
Резюме
В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также основные правила, помогающие запомнить, как работает выравнивание как на главной, так и на поперечной оси.
В первой статье этой серии я объяснила, что происходит при объявлении display: flex для элемента. На этот раз мы рассмотрим свойства выравнивания и их работу с Flexbox. Если вы когда-либо были в замешательстве относительно того, когда выполнять align, а когда justify, я надеюсь, что эта статья снимет все вопросы!
История Flexbox выравнивания
За всю историю CSS компоновки возможность правильного выравнивания элементов по обеим осям казалась мне действительно самой сложной проблемой веб-дизайна. Т.е. способность правильно выравнивать элементы и группы элементов была для многих из нас самой захватывающей особенностью Flexbox, когда он впервые появился в браузерах. Выравнивание стало просто двумя строками в CSS:
Свойства выравнивания, которые можно рассматривать как свойства выравнивания flexbox, теперь полностью определены в спецификации Box Alignment. Она подробно описывает как работает выравнивание в различных контекстах компоновки. Это означает, что мы можем использовать те же свойства выравнивания в CSS Grid, что и в Flexbox, а в будущем, и в других контекстах компоновки. Таким образом, любая новая возможность выравнивания для flexbox будет подробно описана в спецификации Box Alignment, а не на следующем уровне Flexbox.
Свойства
Многие люди говорят мне, что они изо всех сил пытаются вспомнить, следует ли использовать свойства, начинающиеся во flexbox с align-, или те, которые начинаются с justify-. Следует запомнить, что:
- justify выполняет выравнивание главной оси. Выравнивание в том же направлении, что и ваше flex-направление;
- align выполняет выравнивание перпендикулярной оси. Выравнивание по направлению, перпендикулярному flex-направлению.
Мышление с точки зрения главной и поперечной оси, а не горизонтальной и вертикальной, действительно здесь помогает. Не имеет значения, куда физически направлена ось.
Выравнивание главной оси при помощи justify-content
Начнем с выравнивания главной оси. На главной оси выравнивание выполняется с помощью свойства justify-content. Это свойство обрабатывает все flex-элементы как группу и управляет распределением пространства между ними.
Начальное значение свойства justify-content это flex-start. Вот почему при объявлении display: flex все flex-элементы выстраиваются в линию в начале flex строки. Если ваше flex-направление имеет значение row(строка) и направление ввода текста языка слева направо, как английский, то элементы будут начинаться слева.
Рис_1. Элементы выстраиваются в линию от начала
Обратите внимание, что свойство justify-content может выполнять действия только при наличии свободного места для распространения. Поэтому, если ваш набор flex-элементов занимает все пространство на главной оси, использование justify-content ничего не изменит.
Рис_2. Нет пространства для перераспределения
Если мы дадим свойству justify-content значение flex-end, тогда все элементы переместятся в конец строки. Свободное место разместится теперь в начале.
Рис_3. Элементы выстраиваются в линию в конце
Мы можем совершить другие вещи с этим пространством. Мы могли бы попросить его распределиться между нашими flex-элементами, используя justify-content: space-between . В этом случае первый и последний элемент будут заподлицо с концами контейнера и все пространство разделится поровну между элементами.
Рис_4. Свободное пространство распределяется между элементами
Мы можем запросить распределить пространство вокруг наших flex-элементов, используя justify-content: space-around . В этом случае доступное пространство распределяется и размещается с каждой стороны элементов.
Рис_5. Теперь элементы имеют пространство по обе стороны от себя
Новейшее значение свойства justify-content можно найти в спецификации Box Alignment; оно не отображается в спецификации по Flexbox. Это space-evenly. В этом случае элементы будут распределены в контейнере равномерно, а дополнительное пространство будет между ними и с обеих сторон.
Рис_6. Элементы распределены равномерно
Вы можете играть со всеми значениями в демо:
Эти значения работают таким же образом, если ваше flex-направление является столбцом. Однако у вас может не быть дополнительного пространства для распределения в столбце, если вы не добавите высоту или размер блока во flex-контейнер, как в следующем демо.
Выравнивание перпендикулярной оси при помощи align-content
Если вы добавили flex-wrap: wrap во flex-контейнер и имеете несколько flex строк, то вы можете использовать свойство align-content для выравнивания flex строк на поперечной оси. Однако для этого потребуется дополнительное пространство на поперечной оси. В демо, расположенном ниже, моя поперечная ось проходит в блочном направлении, т.е. в столбце, и я уставил высоту контейнера в 60vh. Поскольку это больше, чем необходимо для отображения моих flex-элементов, у меня в контейнере есть вертикальное свободное пространство.
Затем я могу использовать align-content с любым из значений:
Если мое flex-direction — столбец, то align-content будет работать, как в следующем примере.
Как и в случае с justify-content, мы работаем со строками в группе и распределяем свободное пространство.
Короткая форма свойства place-content
В спецификации Box Alignment мы находим сокращенную форму свойства place-content. Использовав это свойство, вы можете установить justify-content и align-content сразу. Первый параметр указывается для align-content, второй — для justify-content. Если указали только одно значение, то оно задается для обоих параметров, следовательно:
.container
.container
Если вы использовали:
.container
то это будет то же самое, что:
.container
Выравнивание перпендикулярной оси при помощи align-items
Теперь мы знаем, что можем выровнять наш набор flex-элементов или наши flex-строки как группу.
Тем не менее, есть еще один способ, которым мы можем выровнять наши элементы, — это выравнивание элементов относительно друг друга на поперечной оси. Ваш контейнер имеет высоту. Эта высота могла бы быть определена высотой самого высокого элемента как на этом рисунке.
Рис_7. Высота контейнера определяется третьим элементом
Вместо этого он может быть определен путем добавления высоты во flex-контейнер:
Рис_8. Высота определяется размером flex-контейнера
Причина, по которой flex-элементы растягиваются до размера самого высокого элемента, заключается в том, что начальным значением параметра align-items является stretch. И элементы растягиваются по поперечной оси, чтобы получить размер flex-контейнера в этом направлении.
Обратите внимание, что в случае align-items имеет значение concerned, и при наличии многострочного flex-контейнера, каждая строка действует как новый flex-контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов строки.
В дополнение к начальному значению stretch можно присвоить элементам align-items значение flex-start, в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.
Рис_9. Элементы выровнены по началу поперечной оси
Значение flex-end перемещает их в конец контейнера по поперечной оси.
Рис_10. Элементы выровнены по концу поперечной оси
Если вы используете значение center элементы все центрируются друг против друга:
Рис_11. Элементы по центру поперечной оси
Мы также можем сделать выравнивание по базовой линии. Это гарантирует выравнивание базовых линий текста, а не выравнивание полей вокруг содержимого.
Рис_12. Выравнивание по базовой линии
Вы можете попробовать эти значения в демо:
Индивидуальное выравнивание с помощью align-self
Свойство align-items означает, что можно задать выравнивание всех элементов одновременно. На самом деле оно устанавливает значения свойства align-self отдельных flex-элементов для всей группы.
Также можно использовать свойство align-self любого отдельного flex-элемента для выравнивания его внутри flex-строки относительно других flex-элементов.
В следующем примере я использовал align-items в контейнере, чтобы задать выравнивание для группы по центру, но также использовал align-self для первого и последнего элементов, чтобы изменить их значение выравнивания.
Почему здесь нет самовыравнивания?
Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы думаете о justify-content и align-content как о распределении пространства, причина отсутствия самонастраивания становится более очевидной. Мы имеем дело с flex-элементами как с группой и распределяем доступное пространство определенным образом — либо в начале, либо в конце группы, либо между элементами.
Если может быть также полезно подумать о том, как обосновать-содержание и выравнивание-содержание работы в макете CSS сетки. В Grid эти свойства используются для распределения свободного пространства в контейнере grid между дорожками grid. Еще раз, мы берем треки как группу, и эти свойства дают нам возможность распределить любое дополнительное пространство между ними. Поскольку мы действуем в группе как в Grid, так и в Flexbox, мы не можем нацелиться на элемент самостоятельно и сделать с ним что-то другое. Тем не менее, есть способ достичь вида макета, который вы просите, когда вы просите self свойство на главной оси, и это использовать автоматические поля.
Использование автоотступов на основной оси
Если вы когда-либо центрировали блок в CSS (например, оболочку для содержимого главной страницы, установив margin слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Отступ, установленный в auto, будет пытаться стать настолько большим, насколько это возможно в установленном направлении. В случае использования отступов для центрирования блока, мы устанавливаем оба, левый и правый, в auto. Каждый из них пытается занять как можно больше места, и поэтому выжимает наш блок в центр.
Автоматические отступы очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере я достигаю общего шаблона проектирования. Я имею панель навигации, использующую Flexbox, элементы отображаются в виде строки и используют начальное значение justify-content: start . Я хотела бы, чтобы последний пункт отображался отдельно от других в конце flex-строки, при условии, что в строке для этого достаточно места.
Я нацеливаюсь на этот пункт меню и даю ему margin-left auto. Это означает, что поле пытается получить как можно больше места слева от пункта, толкая его полностью вправо.
Если вы используете автоотступы на главной оси, то свойство justify-content перестанет создавать какой-либо эффект, так как автоотступы займут все пространство, которое иначе было бы распределено при помощи justify-content.
Резервное выравнивание
Каждый метод выравнивания подробно описывает резервное распределение, это то, что произойдет, если запрошенное выравнивание не может быть достигнуто. Например, если у вас есть только один элемент во flex-контейнере и вы запрашиваете justify-content: space-between, что должно произойти? Ответ заключается в том, что резервное выравнивание использует flex-start, и один элемент будет выровнен по началу flex-контейнера. В случае justify-content: space-around используется резервное выравнивание в центре.
В текущей спецификации вы не можете изменить настройки резервного выравнивания. Поэтому, если вы предпочитаете, чтобы резервный вариант для space-between был центром, а не flex-start, то пока нет способа сделать это. Но в спецификации есть примечание, в котором говорится, что эту возможность могут включить в будущих уровнях.
Безопасное и небезопасное выравнивание
Совсем недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием безопасных и небезопасных ключевых слов.
В следующем коде последний элемент слишком широк для контейнера и при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границу страницы.
.container < display: flex; flex-direction: column; width: 100px; align-items: unsafe center; >.item:last-child
Рис_13. Небезопасное выравнивание обеспечит требуемое выравнивание, но может привести к потере данных
Безопасное выравнивание предотвратит потерю данных, переместив переполнение на другую сторону.
.container < display: flex; flex-direction: column; width: 100px; align-items: safe center; >.item:last-child
Рис_14. Безопасное выравнивание пытается предотвратить потерю данных
Эти ключевые слова прямо сейчас имеют ограниченную поддержку браузерами, тем не менее, они демонстрируют суть дополнительного контроля, вводимого во Flexbox через спецификацию Box Alignment.
Напоследок
Свойства выравнивания начинались как список во Flexbox, но теперь они имеют свою спецификацию и применяются также к другим контекстам компоновки. Несколько ключевых фактов помогут вам вспомнить, как их использовать во Flexbox:
- justify- основная ось и align- поперечная ось;
- Чтобы использовать align-content и justify-content, вам нужно свободное пространство для игры;
- Свойства align-content и justify-content имеют дело с элементами как с группой, разделяя пространство. Таким образом, вы не можете настроить их на отдельный элемент, и поэтому для этих свойств нет самовыравнивания;
- Если вы хотите выровнять один элемент или разделить группу на главной оси, используйте для этого автоматические отступы;
- Свойство align-items устанавливает все значения align-self группы. Используйте align-self на дочернем элементе, чтобы установить значение для отдельного элемента.
Выравнивание с помощью флексбоксов
Выравнивание является большой частью флексбоксов. Помимо обычных свойств выравнивания в CSS, есть свойства, которые были специально разработаны для флексбоксов.
Однако по мере развития спецификации стало ясно, что разные свойства выравнивания, разработанные специально для флексбоксов, также можно применять и к другим моделям. Таким образом, был создан новый модуль CSS, специально предназначенный для выравнивания блоков внутри их контейнеров при использовании блочной вёрстки, вёрстки таблиц, вёрстки флексами и вёрсти сетками.
Вот основные свойства из этой спецификации, которые связаны с флексбоксами.
Свойство align-items
Свойство align-items указывает значение align-self по умолчанию для всех флекс-элементов, участвующих в контексте форматирования флекс-контейнера.
В этом примере мы применяем align-items: center к флекс-контейнеру, поэтому все флекс-элементы выравниваются по центру оси блока.
Поскольку это настройка по умолчанию, любой из флекс-элементов может переопределить выравнивание с помощью свойства align-self .
Свойство align-self
Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.
Здесь у красного флекс-элемента задано значение flex-start , а у синего значение flex-end . Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.
Свойство justify-content
Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.
В этом примере мы используем значение space-between , что приводит к одинаковому промежутку между элементами, каждый из которых выровнен относительно своего края.
Свойство align-content
Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.
Свойство place-content
margin
Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.
См. также
- align-content
- align-items
- align-self
- justify-content
- margin
- margin в CSS
- place-content
- Абсолютное позиционирование
- Блочные элементы
- Выравнивание элементов форм
- Колесо для сокращённых свойств
- Открываем блочную модель
- Свойства flex-контейнера
- Свойства flex-элементов
- Свойство margin
- Создание медиа-объектов
- Строчные элементы
- Схлопывающиеся margin
- Точки между слов
Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox
В этой статье будет рассмотрен очень важный момент при вёрстке любого шаблона, а именно центрирование элементов. В Flexbox это стало гораздо проще и стабильнее.
Эта статья одна из завершающих из цикла переводов про CSS Flexbox. Скоро все они будут скомпонованы в один большой, понятный и объёмный гайд по изучению CSS Flexbox.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
В примерах с навигацией используется пример кода отсюда.
Разочаровались в попытках использования CSS для выравнивания по центру с div ’ами, изображениями и текстом?
Вообще, выравнивание горизонтально и вертикально в CSS всегда было таким, каким-то странным и зачастую не таким, как вообще задумывалось. Я успел применить буквально все хаки в этом направлении за последние несколько лет.
К сожалению, во флотах нет опции center , только left и right . Ну и конечно же там нет опции vertical-center .
CSS Flexbox исправил эти недочеты. Теперь у вас больше контроля над выравниванием HTML элементов, включая опцию идеального центрирования буквально всего, что только можно.
Вообще, во Flexbox стало очень легко отцентровывать текст, изображения и div ’ы. Но это не означает того, что это единственный способ центрировать контент.
Вы наверное делали как я и искали на пространствах сети лучшие способы горизонтальной и вертикальной центровки в HTML.
Я не буду докучать вам объяснениями этих старых хаков с применением внешних отступов, абсолютного и фиксированного позиционирования. Они до сих пор работают, но уже сейчас пора от них избавляться.
Как отцентровать текст в CSS с помощью text-align
Если вам нужно отцентровать текст c CSS внутри элемента, например div ’а, заголовка или параграфа, вы можете смело использовать свойство text-align .
Выставление text-align на center является самым распространенным способом горизонтального выравнивания текста с помощью CSS. Этот подход не ограничивается только текстом, он может использоваться для центровки почти всех элементов потомков, которые меньше родительского контейнера.
Вот три вещи, которые нужно обязательно знать правильного использования text-align , чтобы горизонтально отцентровать текст или элементы потомки.
Текст или элемент центрирования должен быть обёрнут или находится в родительском элементе, который самой собой шире.
Родительский элемент должен иметь text-align: center .
Если вы центрируете элемент, то его свойство display должно быть с inline-block .
Если у вас несколько дочерних элементов, то они все дружно будут отцентрированы внутри родительского контейнера.
text-align имеет несколько свойств:
center : текст отцентрован.
left : текст выровнен по левой стороне контейнера.
right : текст выровнен по правой стороне контейнера.
justify : текст выстраивается ровно по левой и правой граням контейнера, за исключением последней строки.
justify-all : выравнивает последнюю строку.
start : тоже самое, что и left , если написание идёт слева направо. Но будет right , если написание справа налево.
end : start, только наоборот.
match-parent : тоже, что и inherit , но только start и end высчитываются с учетом родительского элемента.
Используйте эти свойства для выравнивания текста внутри родительского элемента или div ’а врапера. Тут всё обыденно и просто.
Выравниваем элементы горизонтально с text-align
Вы можете смело использовать свойство text-align , чтобы выравнивать элементы потомки.
Хороший пример — центровка панели навигации. Это может показаться тягомотиной, так как ширина каждого элемента меню зависит от его текста.
Вообще, центрирование куда проще, если вы знаете точную ширину родителя и его потомков.
Вы можете применить text-align: center для врапера панели навигации. А внешний “родительский” элемент, то есть ul , должен быть с dispay: inline-block .
.navbar text-align:center;
width: 100%;
>
.navbar ul display:inline-block;
>
.navbar li float:left;
>
.navbar li + li margin-left:20px;
>
Ну, а чтобы элементы меню выглядели выровненными, поставим им float: left .
И теперь у вас горизонтально выровненное меню.
Это хороший способ для центрирования элементов, но это очень старый хак.
В наше время у нас уже есть кое-что получше, а именно CSS Flexbox.
CSS Flexbox
Flexbox был добавлен в стандарты CSS несколько лет назад, в основном для того, чтобы разобраться с распределением места и выравниванием элементов. По сути, это синтаксис одномерной раскладки.
А в купе с более новым CSS Grid, веб-разработчики получают куда более мощный инструмент для разработки сложных шаблонов, которые в последствии будет куда проще поддерживать.
Мы говорим, что это одномерный контроль раскладки, но на самом деле у него есть оси x и y. Как вы увидите далее, выравнивание в каждом случае будет происходить с разными свойствами.
Flexbox уже поддерживается всеми современными браузерами, включая даже Internet Explorer, который скоро прикроют. В общем, вы можете смело и уверенно использовать Flexbox в вашем CSS.
Центрируем текст горизонтально и вертикально, используя CSS для выравнивания по центру
Центрирование текста по абсолютному центру традиционно было было одной из самых распространенных проблем с костыльными решениями, которые решил Flexbox. В прошлом было неимоверно много хаков и костылей, таких как использование display: table и т.п. Как я и упоминал ранее, Flexbox сделал этот сложный и неестественный процесс куда более проще.
Для начала, давайте посмотрим на эту разметку, которая демонстрирует то, как отцентрировать текст горизонтально и вертикально.
How to Center
Anything with HTML & CSS
Это div с элементами заголовков. Мы будем использовать CSS не только для горизонтального центрирования, но и для вертикального. Вы можете вставить любые элементы потомки, такие как
или . Вообще очень крутая штука в CSS Flexbox в том, что его инструментарий может центрировать вертикально и горизонтально буквально всё, что только можно!
.text-example display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
margin: 10% 0;
min-height: 200px;
background-color: rgba(33, 33, 33, .3);
align-items: center;
>
Тут div будет занимать всю доступную ширину и будет минимум в 200px высотой. Это даст нам вертикальные маргины для использования в этом примере.
Вся магия произойдет тогда, когда вы выставите display на flex . Когда display стоит на flex , вы можете использовать дополнительные flexbox свойства для управления уже самим макетом.
align-items и justify-content это важные свойства для абсолютного центрирования текста горизонтально и вертикально. Горизонтальное центрирование происходит с помощью justify-content , а вертикальное с align-items .
align-items может использоваться не только для центровки текста вертикально, но и любого дочернего элемента.
В следующих секциях будет показано то, как использовать эти свойства в разных случаях. В примерах с навигацией используется пример кода отсюда.
Горизонтальное центрирование div’ов с использованием CSS Flexbox
Flexbox делает центровку элементов простым и естественным процессом.
Поставьте родительскому элементу .navbar display:flex; . Выставите ширину, в этом примере я хочу, чтобы панель навигации растянулась по всему вьюпорту, то есть на 100%.
Чтобы выставить по центру дочерние элементы, поставьте justify-content: center для элемента родителя.
.navbar display: flex;
justify-content: center;
width: 100%;
>
Чтобы сделать CSS более юзабельным, я разбил стили по разным селекторам:
.flex display: flex;
>
.flex-horizontal-center justify-content: center;
>
Это становится очень удобным при разработке комплексных страниц и когда вам нужна такая же логика в позиционировании. Мне также нравится так делать, потому что таким образом выходит проще читать разметку и накладывать образ предполагаемого макета по ней.
Вертикальное центрирование div’ов с CSS Flexbox
Горизонтальное центрирование никогда не было самым сложным моментом.
Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?
Во многих случаях, это тот момент, при котором большинство разработчиков рвут на себе волосы.
Тут столько правил и костылей, которые нужно запомнить, а ведь всё равно что-нибудь да порушит всю раскладку.
Flexbox наконец-то исправил проблемы с вертикальным центрированием, выдав эту кейсу четкое и понятное правило для применения.
Как и с justify-content: center , которое выстраивает элементы потомки по центру оси x, flexbox align-items: center делает это по оси y.
.flex-vertical-center align-items: center;
>
В примере с меню в хедере, враппер навигационной панели отцентрирован вертикально.
Тут элемент хедер служит родителем для навигационной панели, и его ширина равна 100%, а min-height стоит на 80px.
Так как навигационная панель сама по себе меньше, чем 80px, то тут есть пустое место, с которым мы можем поиграться. Так мы можем сделать навигацию равноудаленной от вершины до низа хедера, добавив ему display: flex и align-items: center .
Абсолютное центрирование div’ов с использованием CSS Flexbox
Пока что мы только узнали то, как отцентрировать элементы горизонтально или вертикально. А теперь пора скомбинировать эти два метода.
Для этого я буду снова использовать панель навигации. Нам нужно, чтобы она отрендерилась в абсолютном центре хедера.
Всё, что вам для этого нужно сделать, это добавить как justify-content: center и align-items: center , ну и flex-direction: column в css для .
.flex-center align-items: center;
justify-content: center;
flex-direction: column;
>
Вы можете применять эту комбинацию flexbox свойств для центровки любого элемента, а не только navbar . Изображения, div ’ы и т.п. Все они могут быть также абсолютно отцентрированы внутри родительского элемента.
Можете посмотреть на то, как я применил этот принцип на полноэкранном фоновом изображении.
Как отцентровать изображение в CSS с помощью text-align и Flexbox
Вообще, изображения могут быть выровнены с использованием свойств text-align и flexbox.
Вы можете применить text-align для элемента родителя изображения с right , left и center возможностями выравнивания.
.image-example width: 60vw;
min-width: 360px;
text-align: center;
margin: 5% auto;
background-color: #ccc;
>
Вы также можете применить флоат слева или cправа, для размещения изображения у желаемой грани контейнера. Я склонен к тому, чтобы использовать флоат, так как обычно я выравниваю изображения внутри текста статьи.
Но тут всё ещё довольно проблематично сделать выравнивание без flexbox. Если вы примените абсолютное центрирование из флексов для контейнера изображения, то вы смело можете выставить картинку по центру обеих осей, ну или только одной, тут уже на ваш выбор.
Просто ради забавы, давайте выровняем изображение с использованием flexbox.
Те же самые правила, что и в примере выше.
Делаем родительский элемент display: flex , он должен быть больше или равным изображению по размерам, align-items и justify-content должны иметь center, а flex-direction выставлен на column .
Теперь изображение абсолютно центрировано в HTML элементе. Вы можете прописать CSS свойства так, что поменять центровка на вертикальную или горизонтальную.
Заключение
Контроль элементов и позиционирования текста это важнейший аспект при хорошей вёрстке.
В былые времена, центрирование и выравнивание элементов были нудным делом и требовали комбинации из разных костылей.
CSS Flexbox поменял подход к выравниваю элементов. И теперь горизонтальное центрирование, также как и вертикальное стали очень простыми.
А комбинирование свойств позиционриования из Flexbox c text-align , может сделать ваши шаблоны куда привлекательнее без громоздких костылей.
Исходный код доступен на GitHub!
Вертикальное выравнивание в блоке (Flexbox)
Для того чтобы выровнять текст или дрогой inline-элемент по высоте родителя, можно применить CSS-свойства flexbox. Например, нужно выравнять текст в ссылках при следующей вёрстке:
Быстрая доставка Скидки клиентам, сезонные акции Большой ассортимент товаров на любой кошелек Гарантия от 1 года