html.okpython.net
Основы создания сайтов
CSS :: Свойство text-align
css-свойство text-align (от англ. text align – выравнивание текста) используется для горизонтального выравнивания строчного содержимого блочных элементов.
Характеристики
- Значение по умолчанию: left.
- Применяется: к блочным элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.textAlign="value".
Синтаксис
text-align: center | justify | left | right | start | end
Значения
- left – текст будет выравниваться по левому краю.
- right – текст будет выравниваться по правому краю.
- center – текст будет выравниваться по центру.
- justify – текст будет растягиваться на всю ширину родительского элемента.
- start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
- end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-text-align
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/text-align
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; margin: 3em; } .p_1{ text-align: right; background-color: yellow; } .p_2{ text-align: center; background-color: blue; } .p_3{ text-align: justify; background-color: green; } </style> </head> <body> <p class="p_1"> text-align: right;<br> Текст выравнивается по правому краю.<br> </p> <p class="p_2"> text-align: center;<br> Текст выравнивается по центру.<br> </p> <p class="p_3"> text-align: justify; Текст растягивается по ширине абзаца. Чтобы эффект был виден, первое предложение должно быть длинее, чем ширина абзаца. </p> </body> </html>
Пример №1