В этой статье показано, как вертикально выровнять текст внутри flexbox:
Способ 1: использование свойства «align-item»
Чтобы выровнять текст по вертикали, пользователи могут использовать « выравнивание элемента », предоставленное CSS. Это помогает элементам установить их выравнивание внутри flexbox. Возможные положения вертикального выравнивания могут быть в « вершина ”, середина ', или ' нижний ' сторона.
Ниже приведены практические демонстрации выравнивания элементов в этих направлениях:
Пример 1: Верхняя позиция
Чтобы выровнять текст внутри флексбокса по верхнему положению, « гибкий старт ” значение предоставляется для “ выравнивание элементов ' свойство. Это свойство назначается основному div, который будет отображаться как гибкий. Предположим, div с классом « вертикальный ” создается в файле HTML. Затем в файле CSS выберите этот класс и назначьте следующие свойства:
.вертикальный {
цвет : белый ;
высота : 150 пикселей ;
отображать : сгибаться ;
padding-left : 20 пикселей ;
выравнивание элементов : гибкий старт ;
фоновый цвет : зеленый лес ;
}
- Во-первых, элементу div задаются основные стили и выравнивание с использованием свойств CSS color, background-color и height.
- Свойство «display» также установлено на «flex», чтобы сделать его flexbox.
- Наконец, чтобы отобразить текст в начале flexbox, установите для свойства «align-items» значение «flex-start.
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод показывает, что текст теперь выровнен по верхней позиции внутри flexbox.
Пример 2: Средняя позиция
Чтобы выровнять текст по центру по вертикали, установите параметр « центр ' значение в CSS ' выравнивание элементов ' свойство:
.вертикальный {цвет : белый ;
высота : 150 пикселей ;
отображать : сгибаться ;
padding-left : 20 пикселей ;
выравнивание элементов : центр ;
фоновый цвет : зеленый лес ;
}
После выполнения вышеуказанного кода:
Приведенный выше вывод показывает, что текст теперь выровнен по центру flexbox.
Пример 3: Нижнее положение
Чтобы установить текст в нижней части flexbox, назначьте « гибкий конец ” к “ выравнивание элементов ' свойство. На этот раз текст выравнивается в том месте, где флексбокс заканчивается, то есть в нижней части:
.вертикальный {цвет : белый ;
высота : 150 пикселей ;
отображать : сгибаться ;
padding-left : 20 пикселей ;
выравнивание элементов : гибкий конец ;
фоновый цвет : зеленый лес ;
}
После выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что текст теперь выровнен по вертикали в нижней позиции.
Способ 2: использование свойства «justify-content»
“ выравнивание содержания Свойство также можно использовать для вертикального выравнивания текста внутри флексбокса. Тем не менее, он работает так же, как « выравнивание текста ” и выравнивает элементы в направлении строки. Таким образом, чтобы изменить направление выравнивания, flex-направление » используется для установки « выравнивание содержания «ориентация на» столбец ' направление:
.вертикальный {высота : 150 пикселей ;
отображать : сгибаться ;
padding-left : 20 пикселей ;
цвет : белый ;
фоновый цвет : темно-голубой ;
flex-направление : столбец ;
выравнивание содержания : гибкий конец ;
}
Объяснение приведенного выше кода приведено ниже:
- “ высота », « цвет ' и ' padding-left » работают точно так же, как описанный выше метод.
- После этого установите « столбец ” к “ flex-направление » flexbox для применения стилей через столбцы.
- После этого « выравнивание содержания ” выравнивает текст по вертикали.
- В итоге « гибкий конец » выравнивает элемент по « нижний ' сторона.
Примечание : Пользователи также могут установить « гибкий старт ' и ' центр ” к “ вершина ', и ' середина стороны соответственно.
Например, после выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что текст выровнен по нижней части flexbox.
Заключение
Чтобы выровнять текст внутри флексбокса по вертикали, « выравнивание элементов ' и ' выравнивание содержания Можно использовать свойства CSS. Оба эти свойства получают « гибкий старт », « центр ' или ' гибкий конец ', чтобы выровнять текст по ' вершина », « середина ' и ' нижний ” направления внутри флексбокса соответственно. В этой статье показано вертикальное выравнивание текста во флексбоксе.