Энциклопедия CSS: text-align

CSS - text-align
CSS text-align
Селектор:	p; h1; div; span
Свойство:	text-align
Значения:	left; right; center; justify; start; end
Портал Веб-разработчиков • • Портал CSS

Свойство text-align в CSS используется для настройки горизонтального выравнивания текста внутри элемента. Оно применяется к блочным элементам, таким как div, p, h1, а также к другим элементам с текстовым содержимым. Это свойство помогает управлять отображением текста, чтобы добиться более аккуратного и удобного дизайна.

Использование CSS для управления текстовым выравниванием можно обсудить на странице обсуждения.

Основные значения text-align

Свойство text-align поддерживает следующие значения:

• left — выравнивание текста по левому краю (по умолчанию для текста на языках с направлением слева направо, таких как русский или английский).
• right — выравнивание текста по правому краю.
• center — выравнивание текста по центру.
• justify — выравнивание текста по ширине, с равномерным распределением строк по горизонтали.
• start — выравнивание текста по началу строки в зависимости от направления письма (например, слева для LTR-языков и справа для RTL-языков).
• end — выравнивание текста по концу строки (справа для LTR и слева для RTL).

Примеры использования

Пример с выравниванием текста по центру

HTML-код:

<div class="centered-text">Этот текст выровнен по центру.</div>

CSS-код:

.centered-text {
    text-align: center;
    border: 1px solid black;
    padding: 10px;
    width: 50%;
    margin: 10px auto;
}

Результат:

Этот текст выровнен по центру.

Пример с выравниванием по ширине (justify)

HTML-код:

<p class="justified-text">
Этот текст выровнен по ширине. Это значение удобно использовать для больших блоков текста, таких как статьи или абзацы, чтобы текст выглядел более эстетично.
</p>

CSS-код:

.justified-text {
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid lightgray;
    padding: 10px;
}

Результат:

Этот текст выровнен по ширине. Это значение удобно использовать для больших блоков текста, таких как статьи или абзацы, чтобы текст выглядел более эстетично.

Пример с выравниванием текста справа

HTML-код:

<div class="right-aligned-text">Этот текст выровнен по правому краю.</div>

CSS-код:

.right-aligned-text {
    text-align: right;
    border: 1px dashed gray;
    padding: 5px;
}

Результат:

Этот текст выровнен по правому краю.

Советы по использованию text-align

• justify подходит для длинных текстов, чтобы текст выглядел более ровным и приятным для чтения. Однако избегайте его для коротких текстовых блоков, так как он может создавать большие пробелы между словами.
• Используйте center для заголовков, цитат или других текстовых элементов, которые должны привлекать внимание.
• start и end особенно полезны для адаптивных интерфейсов, поддерживающих как LTR (слева направо), так и RTL (справа налево) направления текста.

Совместимость

Свойство text-align поддерживается всеми современными браузерами, включая значения left, right, center, justify. Значения start и end требуют поддержки современных спецификаций CSS и могут не работать в устаревших браузерах.

Дополнительные материалы

Обсудить вопросы, связанные с использованием text-align, можно на странице обсуждения.