| Kosten | Пятница, 19 Ноября 2021, 22:16 | Сообщение 1 |
| В данном мануале рассмотрим актуальную тема, это как можно выравнивать текст с использованием CSS. Здесь не чего сложного нет, главное понять суть, где для этого есть специальные свойство text-align - который имеет значение в четырех свойствах.
Вот нам нужно рассмотреть все 4 значение, но а главное, как они работают, это выравнивают текстуру или делают отступы по сторонам, что иногда просматривая вопросы, то такой аналогичный вопрос можно занести в топ, как самый актуальный, что больше задается под ответ.
Выравнивание текста с помощью CSS
Как уже было сказано, что у данного свойства text-align имеется 4 стандартных значения, где можно догадаться, это 4 стороны, хотя это близко в этому и не более.
right - здесь выравниваем по правому краю;
center - здесь выравнивание идет по левому краю;
left - этим свойством ровняем по левому краю;
justify - вероятно многие не знали, но есть выравнивание по ширине. Здесь применяется к описанием, так, чтоб строка на строку не лезла, то делаем пробел, и здесь прекрасно справляется данное свойство.
Давайте посмотрим как в стилистике будет выглядеть:
CSS
Код .text_center {
text-align: center; /* выравнивание по центру */
}
.text_left {
text-align: left; /* выравнивание по левому краю */
}
Как понимаете, чтоб все задействовать, то можно под классы выставлять, который к примеру отвечает за блок, где присутствует описание. И здесь мы можем описание поставить по центру или выставить по левую сторону.
Пример выравнивания текста в CSS
Чтоб все понять как можно быстрей, то думаю нужно задействовать все значение на примере, где далее будет возможность рассмотреть все действие по выравниванию текста.
HTML и CSS
Код <html> <head> <title>Пример выравнивания текста в CSS</title> <style> .text_center { text-align: center; /* выравнивание по центру */ } .text_left { text-align: left; /* выравнивание по левому краю */ } .text_right { text-align: right; /* выравнивание по правому краю */ } .text_justify { text-align: justify; /* выравнивание по ширине */ } </style> </head> <body> <p class="text_center">Текст по центру</p> <p class="text_left">Текст по левому краю</p> <p class="text_right">Текст по правому краю</p> <p class="text_justify">Текст по ширине</p> </body> </html>
В данном результате независимо от масштабирования окна, где текстура или текст станет выравниваться только согласно заданному значению свойства text-align - который всегда востребован.
Демонстрация
| | Страна: (RU) |
| |
