Как выровнять текст в CSS: руководство для начинающих

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

Свойство text-align определяет, как текст будет выравниваться по горизонтали внутри элемента. Существуют четыре возможных значения: left, right, center и и justify. «Left» означает, что текст будет выровнен по левому краю элемента. «Right» – по правому краю, «center» – по центру, а «justify» потянет текст до ширины элемента, создавая равные интервалы между словами.

Пример кода:

.textblock {
  text-align: justify; /* задаем выравнивание текста */
  width: 300px; /* задаем ширину блока */
  margin: 0 auto; /* центрируем блок */
}

Свойство line-height задает высоту строки текста. Выбор правильного значения line-height позволяет улучшить читабельность текста и сделать его более привлекательным для глаза читателя. Например, установка line-height со значением 1.5 покажет весь текст более читабельным и привлекательным.

.textblock {
  line-height: 1.5; /* устанавливаем высоту строки */
}

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

img {
  vertical-align: middle; /* выравниваем изображения по вертикали */
}