Как выровнять текст по центру по вертикали?
В этом посте я покажу вам, как выровнять текст по центру по вертикали . Кроме того, я дам вам нескольких примеров и вариантов использования.
Прочитав этот пост, вы сможете выравнивать текст по центру по вертикали с разных сторон. И последнее, но не менее важное: вы получите все образцы кода и репозиторий GitHub.
Прежде чем приступить к работе, просмотрите предварительный просмотр готовых продуктов, которые вы собираетесь создавать.
Live Preview
Приступим.
Примеры текста, выровненного по центру по вертикали
Текст или абзац можно выровнять по центру по вертикали слева, по центру и справа. Если это не имеет смысла, позвольте мне привести вам пару примеров ниже.
Пример 1: Вертикальное выравнивание по центру слева
Вертикальное выравнивание по центру слева Для каждого из этих примеров у меня есть тег абзаца (
), и он находится внутри
, который имеет класс .
container--text . См. мою HTML-разметку ниже.
container--text HTML
Lorem ipsum dolor sitamet consectetur adipisicing elitsed eiusmod empor incididunt.
CSS
.container--text {
дисплей: гибкий;
выравнивание элементов: по центру;
} Вывод
См. вывод здесь →
Для каждого из этих примеров у меня также есть дополнительная разметка и CSS, такие как фон, отступы и т. д. Если вы хотите увидеть весь шаблон, проверьте мой репозиторий GitHub.
Это точно такой же шаблон, который вы видели в предварительном просмотре.
Пример 2: Выравнивание по центру по вертикали и горизонтали
Выравнивание по центру по вертикали и горизонталиВозможно, это наиболее часто используемое вертикальное выравнивание. И в большинстве случаев люди ссылаются на этот пример, когда дело доходит до выравнивания контента по вертикали.
Для этого примера у меня есть следующий HTML и CSS.
HTML
Lorem ipsum dolor sitamet consectetur adipisicing elitsed eiusmod empor incididunt.
CSS
.container--текст {
дисплей: гибкий;
выравнивание содержимого: по центру; /* центрирует его по горизонтали */
выравнивание элементов: по центру; /* делает его центрированным по вертикали */
} Вывод
См. вывод здесь →
Пример 3: Выровнено по центру справа по вертикали
Выровнено по центру справа по вертикалиЭтот пример может не очень часто использоваться, но некоторым из вас он может понадобиться.
HTML
Lorem ipsum dolor sitamet consectetur adipisicing elitsed eiusmod empor incididunt.
CSS
.container--текст {
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: flex-end; /* выравнивает содержимое по правому краю */
} Вывод
См. вывод здесь →
В этом посте я использовал CSS Flexbox для выравнивания элементов. Если вы хотите подробно изучить Flexbox, см. этот пост.
Но Flexbox — не единственный способ выравнивания содержимого по центру.
Есть и другие способы, такие как Grid, Position, Transform и т. д.
Ниже я добавил несколько других ресурсов. Речь идет о центрировании контента. Вы также найдете различные подходы к их выравниванию.
Подробнее о центрировании элементов HTML
- Центрирование таблицы
- Центрирование списка HTML
- Центрирование видео
- Центрирование кнопки
- Центрирование блока div
- Центрирование текста (по горизонтали)
- Текст по центру (вертикально)
- Центрировать изображение
- Центрировать форму
- Центрировать ссылку
- Выравнивание по центру с использованием абсолютного положения
- Выравнивание по центру с помощью Flexbox
Создание проектов HTML CSS
Заключение
Теперь вы знаете, как выровнять определенный текст по центру по вертикали. В то же время вы также узнали, как выровнять их по центру слева, по центру и по центру справа.
В этих примерах я использовал Flexbox, но я также включил другие ресурсы, содержащие другие методы.