Главная страница » CSS » 11. Выравнивание текста

11. Выравнивание текста

Выравнивание текста в CSS позволяет контролировать, как текст располагается внутри элементов на веб-странице. Правильное выравнивание текста улучшает читаемость и общий внешний вид страницы. В CSS существует несколько свойств и методов для управления выравниванием текста.

Основные свойства для выравнивания текста

text-align: Это основное свойство для выравнивания текста внутри блока. Оно управляет выравниванием текста по горизонтали.

				
					p {
    text-align: left; /* Выравнивание текста по левому краю */
}

Значения text-align:

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

Примеры:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .left-align {
            text-align: left;
        }
        .center-align {
            text-align: center;
        }
        .right-align {
            text-align: right;
        }
        .justify-align {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left-align">Этот текст выровнен по левому краю.</p>
    <p class="center-align">Этот текст выровнен по центру.</p>
    <p class="right-align">Этот текст выровнен по правому краю.</p>
    <p class="justify-align">Этот текст выровнен по ширине. Обратите внимание, что слова будут растягиваться так, чтобы текст заполнял всю ширину блока.</p>
</body>
</html>

text-indent: Это свойство используется для создания отступа в начале первой строки текста.

				
					p {
    text-indent: 20px; /* Отступ первой строки на 20 пикселей */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .indent {
            text-indent: 30px; /* Отступ первой строки на 30 пикселей */
        }
    </style>
</head>
<body>
    <p class="indent">Этот абзац имеет отступ первой строки на 30 пикселей.</p>
</body>
</html>

line-height: Это свойство управляет высотой строки текста и может использоваться для улучшения читаемости текста.

				
					p {
    line-height: 1.5; /* Высота строки в 1.5 раза больше размера шрифта */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .line-height {
            line-height: 2; /* Высота строки в 2 раза больше размера шрифта */
        }
    </style>
</head>
<body>
    <p class="line-height">Этот текст имеет высоту строки в 2 раза больше размера шрифта, что делает его более разборчивым.</p>
</body>
</html>

text-align-last: Это свойство управляет выравниванием последней строки текста внутри блока с text-align: justify. Оно позволяет задать выравнивание последней строки, которая может не заполнять всю ширину блока.

				
					p {
    text-align: justify;
    text-align-last: right; /* Выравнивание последней строки по правому краю */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .justify-last {
            text-align: justify;
            text-align-last: right;
        }
    </style>
</head>
<body>
    <p class="justify-last">Этот текст выровнен по ширине. Последняя строка будет выровнена по правому краю.</p>
</body>
</html>

Выравнивание текста по вертикали

Для выравнивания текста по вертикали в блоках можно использовать несколько свойств:

vertical-align: Это свойство применяется к строчным и встроенным элементам (например, inline, inline-block, table-cell) и управляет их вертикальным выравниванием относительно линии базового текста.

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

Значения vertical-align:

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

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .align-middle {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p>Текст перед изображением <img decoding="async" src="example.jpg" alt="Example" class="align-middle"> Текст после изображения.</p>
</body>
</html>

Flexbox: Для более сложного вертикального выравнивания, можно использовать Flexbox. Свойства align-items и align-self помогают выравнивать элементы по вертикали в контейнерах flex.

				
					.container {
    display: flex;
    align-items: center; /* Выравнивание по вертикали по центру */
    height: 200px; /* Высота контейнера для демонстрации выравнивания */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: center; /* Вертикальное выравнивание по центру */
            height: 200px; /* Высота контейнера */
            border: 1px solid #ccc; /* Для видимости контейнера */
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Этот текст выровнен по вертикали по центру контейнера.</p>
    </div>
</body>
</html>

Распространённые ошибки

Неправильное использование text-align: Убедитесь, что text-align применяется только к блочным элементам и не используется для выравнивания текста внутри элементов, которые не являются блочными.
Игнорирование высоты строки: Пренебрежение настройкой line-height может сделать текст менее читаемым. Убедитесь, что высота строки подходит для шрифта и размера текста.
Сложные вертикальные выравнивания: При использовании vertical-align с элементами, которые не являются строчными, результаты могут быть непредсказуемыми. Рассмотрите использование Flexbox или Grid для более сложного выравнивания.

Заключение

Выравнивание текста в CSS помогает улучшить читабельность и внешний вид текста на веб-странице. Понимание и использование свойств text-align, text-indent, line-height, и vertical-align поможет создать более профессиональные и привлекательные веб-страницы.

Тестовое задание

Создайте HTML-документ с элементами <h1>, <p>, <div>, <img>, и <button>.
Примените различные свойства для выравнивания текста и проверьте их поведение.
Используйте text-align, text-indent, line-height, и vertical-align для создания отступов, выравнивания текста по центру и верхнему краю.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .left-align {
            text-align: left;
        }
        .center-align {
            text-align: center;
        }
        .right-align {
            text-align: right;
        }
        .justify-align {
            text-align: justify;
        }
        .indent {
            text-indent: 20px;
        }
        .line-height {
            line-height: 1.8;
        }
        .container {
            display: flex;
            align-items: center;
            height: 200px;
            border: 1px solid #ccc;
        }
        .vertical-align {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <h1 class="center-align">Заголовок страницы</h1>
    <p class="justify-align indent line-height">Этот текст выровнен по ширине и имеет отступ первой строки и увеличенную высоту строки для лучшей читаемости.</p>
    <div class="container">
        <p>Этот текст выровнен по вертикали по центру контейнера.</p>
    </div>
    <p>Текст перед изображением <img decoding="async" src="example.jpg" alt="Example" class="vertical-align"> Текст после изображения.</p>
</body>
</html>

Выполнив это задание, вы получите практическое представление о том, как управлять выравниванием текста и использовать CSS-свойства для создания профессионального веб-дизайна.