Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и
может выполняться по левому краю, правому краю, по центру или по ширине. В
табл. 1 показаны варианты выравнивания блока текста.
Табл. 1. Способы выравнивания текста |
Выравнивание по левому краю |
|
Выравнивание по правому краю |
|
Выравнивание по центру |
|
Выравнивание по ширине |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. |
|
|
|
|
Наиболее распространенный вариант — выравнивание по левому краю, когда слева
текст сдвигается до края, а правый остается неровным. Выравнивание по правому
краю и по центру в основном используется в заголовках и подзаголовках. Следует
иметь в виду, что при использовании выравнивания по ширине в тексте между
словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег параграфа <P> с параметром align,
который определяет способ выравнивания. Также блок текста допустимо выравнивать
с помощью тега <DIV> с аналогичным параметром align, как показано в табл. 2.
Табл. 2. Выравнивание текста с помощью параметра align |
Код HTML |
|
Описание |
<p>Текст</p> |
|
Добавляет новый
параграф, по умолчанию выровненный по левому
краю. Перед параграфом и после него
автоматически добавляются небольшие
вертикальные отступы. |
|
|
|
<p align="center">Текст</p> |
|
Выравнивание по
центру. |
|
|
|
<p align="left">Текст</p> |
|
Выравнивание по левому краю. |
|
|
|
<p align="right">Текст</p> |
|
Выравнивание по правому краю. |
|
|
|
<p align="justify">Текст</p> |
|
Выравнивание по ширине. |
|
|
|
<nobr>Текст</nobr> |
|
Отключает автоматический перенос строк, даже если текст шире окна
браузера. |
|
|
|
Текст<wbr> |
|
Разрешает браузеру делать перенос строки в указанном месте, даже если
используется NOBR тег. |
|
|
|
<div align="center">Текст</div> |
|
Выравнивание по центру. |
|
|
|
<div align="left">Текст</div> |
|
Выравнивание по левому краю. |
|
|
|
<div align="right">Текст</div> |
|
Выравнивание по правому краю. |
|
|
|
<div align="justify">Текст</div> |
|
Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать
его лишний раз необходимости нет. Так что параметр align="left" можно опустить.
Отличие между параграфом (тег <P>) и тегом <DIV> в том, что в начале и конце параграфа появляется
вертикальный отступ, чего нет в случае использования тега <DIV>.
Параметр align достаточно универсален и может
применяться не только к основному тексту, но и к заголовкам вроде <H1>. В примере 1 показано, как в подобном случае
устанавливать выравнивание.
Пример 1. Выравнивание текста |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<body>
<h1
align="center">Как поймать льва?</h1>
<p
align="right"><strong>Метод перебора</strong></p>
<p>Делим пустыню на ряд элементарных участков, размер которых
совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее
простым перебором определяем участок, в котором находится лев, что автоматически
приводит к его поимке.</p>
<p align="right"><strong>Метод
дихотомии</strong></p>
<p>Делим пустыню на две половины. В
одной части - лев, в другой его нет. Берем ту половину, в которой находится лев,
и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется
пойман.</p>
</body>
</html> |
В данном примере выравнивание заголовка происходит по центру окна браузера,
выделенного абзаца по правому краю, а основного текста — по левому краю.