Css align text vertical: html — How do I vertically center text with CSS?

Leave a Comment / Css / By /

align | HTML и CSS с примерами кода

Свойство vertical-align выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Колонки и таблицы
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  • vertical-align

Синтаксис

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%;
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Значения

baseline
Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.
bottom
Выравнивает низ блока по нижней части строки.
middle
Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».
sub
Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.
super
Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.
text-bottom
Нижняя граница элемента выравнивается по нижнему краю содержимого родителя.
text-top
Верхняя граница элемента выравнивается по верхнему краю содержимого родителя.
top
Выравнивает верх блока по верхней части строки.

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по её верхнему краю.

Значение по-умолчанию: baseline

Применяется к строчным элементам или ячейкам таблицы

Спецификации

  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vertical-align</title>
    <style>
      . tex {
        font-size: 2rem;
      }
      .tex sub {
        vertical-align: sub;
        font-size: 1.8rem;
      }
      .tex sup {
        vertical-align: 5px;
        font-size: 1.6rem;
      }
    </style>
  </head>
  <body>
    <div>
      T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
    </div>
  </body>
</html>

Как вертикально выровнять текст с помощью CSS

Использование дополнительных и дополнительных значений

Используя суперзначение: x

2+ y2 = r2

Химическая формула воды с использованием вспомогательного значения: H

2O

Протестируйте сейчас

Выход

Теперь есть еще один пример, в котором мы выравниваем текст с изображением.

Пример

<голова> <стиль> дел { размер шрифта: 20px; граница: 2 пикселя сплошного красного цвета; } картинка { ширина: 150 пикселей; высота: 100 пикселей; } img.top { вертикальное выравнивание: текст сверху; } img.bottom { вертикальное выравнивание: текст внизу; } img.middle { вертикальное выравнивание: посередине; } <тело>

Изображение с выравниванием по умолчанию.
Изображение с выравниванием текста по нижнему краю.
Изображение с выравниванием по середине.
Изображение с выравниванием текста по верхнему краю.

Протестируйте сейчас

Выход

Следующая темаКак подчеркнуть текст в CSS

← предыдущая следующий →

следующий → ← предыдущая

Свойство

vertical-align в CSS используется для определения вертикального выравнивания встроенного поля или поля ячейки таблицы. Это одно из очевидных свойств CSS.

Свойство CSS vertical-align управляет тем, как элементы располагаются рядом друг с другом. Когда это свойство применяется к ячейкам таблицы, оно влияет не на саму ячейку, а на ее содержимое.

У этого свойства есть несколько допустимых значений: базовая линия, верх, низ, середина, текст вверху, текст внизу, суб, супер, и длина ( в пикселей, см, em, и т. д. ) . Значения этого свойства sub и super обычно используются для нижнего и верхнего индекса текста.

Это свойство CSS можно использовать для выравнивания содержимого ячейки в таблице по вертикали. Он может вертикально выровнять изображение в строке текста. Это свойство нельзя использовать для вертикального выравнивания элементов уровня блока.

Давайте разберемся в этом свойстве с помощью некоторых иллюстраций.

Пример

<голова> <стиль> стол, й, тд{ граница: 2 пикселя сплошного красного цвета; граница коллапса: коллапс; размер шрифта: 20px; } #супер{ вертикальное выравнивание: супер; } #sub{ вертикальное выравнивание: суб; } <тело> <таблица>

базовый уровеньсреднийвнизусверхуЗдравствуйте! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям.

Как выровнять текст по вертикали в CSS

html

1 месяц назад

от Sharqa Hameed

Текст можно легко добавить куда угодно, но без выравнивания он может выглядеть непрезентабельно и менее привлекательно. Невыровненный текст также может нарушить общий вид веб-страницы. Чтобы справиться с такими вещами в веб-приложениях, мы можем использовать некоторые полезные свойства CSS, которые помогут вам быстро выравнивать тексты.

В этой статье показано, как выровнять текст по вертикали в CSS.

Как выровнять текст по вертикали в CSS?

В CSS вы можете использовать следующие свойства для выравнивания текста по вертикали:

    • свойство высоты строки
    • свойства отображения и выравнивания элементов

Теперь давайте рассмотрим каждый метод один за другим!

Способ 1.

Использование свойства line-height для выравнивания текста по вертикали в CSS

« line-height 9Свойство 0009 задает область ниже и выше встроенных элементов. Он устанавливает расстояние текста от других элементов. Используя свойство line-height, текст можно легко выровнять вертикально по середине.

Пример

Вот текст внутри рамки (рамки), расположенной в настоящее время в верхней левой части. Выровняем этот текст по центру по вертикали и горизонтали:

Для этого добавьте контейнер «

» внутри тега HTML-файла и укажите в нем нужный текст:


    Лучший образовательный сайт!

 
Поле формируется с использованием границы « 3px » и высоты « 250px ». Свойство « font-size » используется со значением « 24px », чтобы сделать шрифт видимым. Мы назначим div « line-height » из « 250px » для вертикального выравнивания текста по середине.

Далее мы воспользуемся свойством « text-align », чтобы выровнять текст по центру:

div {
      высота строки: 250 пикселей;
      text-align: center;
      размер шрифта: 24 пикселя;
      высота: 250 пикселей;
      граница: сплошная 3 пикселя;
    }

 

Как видите, текст был выровнен по вертикали по центру с помощью line-height и по горизонтали по центру с помощью свойства text-align.

Теперь давайте перейдем к следующему методу.

Способ 2. Использование свойства display и align-items для выравнивания текста по вертикали в CSS

« Flexbox » — это одномерный макет, позволяющий форматировать HTML. Вы также можете использовать его для выравнивания элементов по вертикали или горизонтали.

Итак, давайте возьмем пример и выровняем текст по вертикали с помощью флексбокса.

Пример

Прежде всего, мы сделаем наш контейнер гибким, установив значение свойства «

display » как « flex ». Затем используйте свойство « align-items » для установки содержимого в центре по вертикали. Кроме того, чтобы выровнять содержимое по центру по горизонтали, кнопка « justify-content ” будет использоваться свойство:

div {
      display: flex;
      align-items: center;
      justify-content: center;
      размер шрифта: 24 пикселя;
      высота: 200 пикселей;
      граница: сплошная 3 пикселя;
    }

 
Указанный текст успешно выровнен по центру:

Мы предоставили методы, связанные с выравниванием текста по вертикали в CSS.

Заключение

В CSS текст можно легко выровнять по вертикали с помощью « line-height ” свойство. Вы также можете использовать « flexbox » для вертикального выравнивания текста со свойствами «

display » и « align-items ». Flexbox — это одномерный макет, который просто используется для вертикального или горизонтального выравнивания элементов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *