Текст можно легко добавить куда угодно, но без выравнивания он может выглядеть непрезентабельно и менее привлекательно. Невыровненный текст также может нарушить общий вид веб-страницы. Чтобы справиться с такими вещами в веб-приложениях, мы можем использовать некоторые полезные свойства CSS, которые помогут вам быстро выравнивать тексты.
Эта статья продемонстрирует, как выровнять текст по вертикали в CSS.
Как выровнять текст по вертикали в CSS?
В CSS вы можете использовать следующие свойства для выравнивания текста по вертикали:
-
- свойство line-height
- свойства display и align-items
Теперь давайте рассмотрим каждый метод один за другим!
Метод 1: использование свойства line-height для выравнивания текста по вертикали в CSS
“ высота линии ” указывает область ниже и выше встроенных элементов. Он устанавливает расстояние текста от других элементов. Используя свойство line-height, текст можно легко выровнять вертикально по середине.
Пример
Вот текст внутри поля (границы), в настоящее время расположенного в верхней левой части. Давайте выровняем этот текст по центру по вертикали и горизонтали:
Для этого добавьте контейнер « <дел> » внутри тега
Лучший образовательный сайт !
див >
Коробка формируется с помощью « 3 пикселя «граница и» 250 пикселей ' высота. “ размер шрифта ” свойство используется со значением “ 24px », чтобы сделать шрифт видимым. Мы назначим div « высота линии ' из ' 250 пикселей ” для выравнивания текста по вертикали посередине. Далее мы будем использовать « выравнивание текста ” для выравнивания текста по центру:
высота строки: 250 пикселей;
выравнивание текста: по центру;
размер шрифта: 24px;
высота: 250 пикселей;
граница: сплошная 3 пикселя;
}
Как видите, текст был выровнен по вертикали по центру с помощью line-height и по горизонтали по центру с помощью свойства text-align.
Теперь давайте перейдем к следующему методу.
Способ 2. Использование свойства display и align-items для выравнивания текста по вертикали в CSS
“ Флексбокс ” — это одномерный макет, позволяющий форматировать HTML. Вы также можете использовать его для выравнивания элементов по вертикали или горизонтали.
Итак, давайте возьмем пример и выровняем текст по вертикали с помощью флексбокса.
Пример
Прежде всего, мы сделаем наш контейнер гибким, установив значение « отображать «собственность как» сгибаться ». Далее используйте « выравнивание элементов ” для установки содержимого в центре по вертикали. Кроме того, чтобы выровнять содержимое по центру по горизонтали, « выравнивание содержания ” свойство будет использоваться:
див {отображать: сгибаться ;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
размер шрифта: 24px;
высота: 200 пикселей;
граница: сплошная 3 пикселя;
}
Указанный текст успешно выровнен по центру:
Мы предоставили методы, связанные с выравниванием текста по вертикали в CSS.
Вывод
В CSS текст можно легко выровнять по вертикали с помощью « высота линии ' имущество. Вы также можете использовать функцию « флексбокс ' для вертикального выравнивания текста с ' отображать ' а также ' выравнивание элементов ' характеристики. Flexbox — это одномерный макет, который просто используется для вертикального или горизонтального выравнивания элементов. В этом посте предложены два самых простых метода, которые помогут вам выровнять текст по вертикали в CSS.