Свойство text-align позволяет задать выравнивание текста по горизонтали в CSS.Возможные значения: left, center, right, justify, start, end
Значение по умолчанию: left
Наследуется: Да
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>CSS text-align</title> <meta http-equiv="Content-Type" content="text/html;charset=utf8"> </head> <body> <p style="text-align:left;"> Выравнивание по левому краю (left). Здесь текст будет выравниваться по левому краю. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p style="text-align:center;"> Выравнивание по центру (center). Здесь текст будет выравниваться по центру. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p style="text-align:right;"> Выравнивание по правому краю (right). Здесь текст будет выравниваться по ширине. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p style="text-align:justify;"> Выравнивание по ширине (justify). Здесь текст будет выравниваться по правому краю. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p style="text-align:start;"> Выравнивание по началу текста (start). Здесь текст будет выравниваться по началу. Разница будет заметна при использовании языков с начертанием справа налево. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p style="text-align:end;"> Выравнивание по концу текста (end). Здесь текст будет выравниваться по концу. Разница будет заметна при использовании языков с начертанием справа налево. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста. </p> <p> <a href="https://urvanov.ru/2016/02/15/css-text-align/">CSS text-align (выравнивание текста по ширине в CSS)</a> </p> </body> </html> |
Посмотреть результат. Обратите внимание на границы текста. В первом абзаце граница текста слева идёт на одном уровне. Во втором абзаце текст выровнен по центру.