Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и
может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Выравнивание текста</title> </head> <body> <h1 align="center">Как поймать льва?</h1> <p align="right"><strong>Метод перебора</strong></p> <p>Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p> <p align="right"><strong>Метод дихотомии</strong></p> <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p> </body> </html>
Результат примера :
Выравнивание текста
Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
В данном примере выравнивание заголовка происходит по центру окна браузера,
выделенного абзаца по правому краю, а основного текста — по левому краю.
Комментарии: