Выравнивание текста на Web-странице
Такие текстовые процессоры, как MS Word или WordPerfect, предоставляют четыре варианта выравнивания текста абзаца. Как показано на рис. 4.9, текст можно выровнять по левому полю, по правому полю, по центру или по ширине (т.е. одновременно по левому и по правому полю).
Три первых варианта выравнивания (по левому краю, по правому краю и по центру) не представляют для HTML ничего нового. Атрибут align позволяет центрировать текст или выравнивать его по левому или правому краю Web-страницы или HTML-таблицы. Тем не менее, атрибут align не имеет значения "justify", которое позволило бы форматировать строки текста так, как показано в четвертом абзаце на рис. 4.9. К счастью, свойство text-align каскадных списков стилей предоставляет опцию "justify" и дает возможность форматировать текст, выравнивая его по ширине.
Рис. 4.9. Абзацы текста, выровненные по левому краю, правому краю, по центру и по ширине
Чтобы воспользоваться четырьмя опциями выравнивания каскадных списков стилей создайте в списке стилей следующие четыре несвязанных правила:
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.justify {text-align:justify}
Обратите внимание, что не требуется создавать правила для использования свойства text-align каскадных списков стилей. Тем не менее, если вы определите приведенные выше классы списков стилей, выравнивание элемента можно будет выполнять с помощью задания атрибута с1аss=имякласса в дескрипторе элемента страницы, а не атрибута style=правоевыравнивание, который на несколько символов длиннее.
После описания классов для выравнивания текста в его элементе-контейнере можно воспользоваться атрибутом class. Кроме того, текст можно выравнивать на всей Web-странице, во всей таблице или в отдельных ее ячейках или строках, а также можно выравнивать текст, используемый в качестве заголовков для элементов форм. Например, для выравнивания по ширине всего текста Web-страницы, необходимо следующим образом установить свойство text-align в дескрипторе <body>:
<body class="justify">