left — выравнивание текста по левому краю (по умолчанию для большинства языков).
right — выравнивание по правому краю.
center — выравнивание по центру.
justify — выравнивание по ширине (равномерное распределение текста).

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Выравнивание текста</title>
    <style>
        .left { text-align: left; }
        .right { text-align: right; }
        .center { text-align: center; }
        .justify { text-align: justify; }
    </style>
</head>
<body>

    <p class="left">Этот текст выровнен по левому краю.</p>
    <p class="right">Этот текст выровнен по правому краю.</p>
    <p class="center">Этот текст выровнен по центру.</p>
    <p class="justify">Этот текст выровнен по ширине. Он равномерно распределён по всей ширине блока.</p>

</body>
</html>

2. Вертикальное выравнивание с vertical-align

Свойство vertical-align применяется к встроенным (inline) элементам (например, span, img, button в display: inline-block). Оно не работает для блочных элементов.

Основные значения:

baseline (по умолчанию) — выравнивает текст по базовой линии.
top — выравнивание по верхнему краю.
middle — выравнивание по центру строки.
bottom — выравнивание по нижнему краю.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вертикальное выравнивание</title>
    <style>
        .container {
            font-size: 20px;
            border: 1px solid #000;
            height: 50px;
            display: flex;
            align-items: center; /* Альтернативный метод */
        }
        .inline-box {
            display: inline-block;
            vertical-align: middle;
            background: lightblue;
            padding: 5px;
        }
    </style>
</head>
<body>

    <p class="container">
        Текст <span class="inline-box">inline-block элемент</span> на одной линии
    </p>

</body>
</html>

👉 Лучший способ для вертикального выравнивания — использовать flexbox (см. следующий пункт).

3. Выравнивание текста с помощью flexbox и grid

Выравнивание с flexbox

Flexbox — удобный способ центрирования текста внутри контейнера.

Пример центрирования текста по вертикали и горизонтали:

<div class="flex-container">
    Центрированный текст
</div>

<style>
    .flex-container {
        display: flex;
        justify-content: center; /* Горизонтальное выравнивание */
        align-items: center; /* Вертикальное выравнивание */
        height: 200px;
        border: 1px solid black;
    }
</style>

Выравнивание с grid

CSS Grid также позволяет легко центрировать текст.

<div class="grid-container">
    Центрированный текст
</div>

<style>
    .grid-container {
        display: grid;
        place-items: center; /* Центрирует текст по вертикали и горизонтали */
        height: 200px;
        border: 1px solid black;
    }
</style>

Итог

Используйте text-align для горизонтального выравнивания текста.
Используйте vertical-align, если элементы inline или inline-block.
Для центрирования в контейнере лучше всего подходят Flexbox (display: flex) или Grid (display: grid).

Если вам нужно центрирование внутри блока, flexbox или grid — лучший выбор!

Предыдущий вопрос

Как добавить видео на страницу HTML?

Следующий вопрос

Какова цель атрибута "ALT" в изображении?

Содержание:

1. Горизонтальное выравнивание с text-align

2. Вертикальное выравнивание с vertical-align

3. Выравнивание текста с помощью flexbox и grid

Итог

Редактировать