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