Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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.
| Код 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. Выравнивание текста
<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>
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
| Статья опубликована: 06.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Ludmila Sharapova
15.05.2006
Дмитрий
14.06.2006
Влад Мержевич
15.06.2006
Алиса
23.07.2006
Влад Мержевич
24.07.2006
Аня
25.07.2006
Спасибо!
С уважением,
Аня
Kuki
19.09.2006
Влад Мержевич
20.09.2006
kuki
20.09.2006
Иван
26.09.2006
его значене:
layout-flow: vertical-ideographic;
как раз меняет направление текста на вертикальный, но текст получается сверху вниз и справа налево, т.е. нужно ещ? бы повернуть на 180, чтобы было совсем по-русски.
Но тег поддерживается только лишь в IE, так что лучше про него забыть
Hj
15.02.2007
например вставка большого колличества пустого места в текст типа эффекта из блокнота при нажатии кнопки TAB
Lev
24.04.2007
Влад Мержевич
26.04.2007
Клипсидра
21.05.2007
u4n
23.05.2007
Как быть? потому что только IE подефолту устанавливает див по центру. FF и Opera выравнивают див по левую краю. <div style="text-align: center"> выравнивает содержимое дива, но не вложенный див.
Valerie
08.06.2007
Дмитрий
17.07.2007
Paves
18.07.2007
Лаконично и по существу - все самое необходимое.
Нашел как выравнивать текст по ширине :о)
Александр
28.07.2007
Влад Мержевич
31.07.2007
<td valign="top">...</td>
Виталий
05.08.2007
текст 1<div align=right>текст 2</div>
текст 1<div style="text-align:right;">текст 2</div>
не подходит, потому что разрывает строку на две
текст 1<span align=right>текст 2</span>
текст 1<span style="text-align:right;">текст 2</span>
не выравнивает по правому краю
Влад Мержевич
07.08.2007
Алексей
09.08.2007
<div style="text-align:center;width:500px">
<div id="internal" style="width:100px">text</div>
</div>
такая комбинация не работает
Алексей
09.08.2007
Алексей
09.08.2007
<div style="text-align:center;width:500px">
<div id="internal" style="width:100px;display:table;margin:0 auto;">
<div align="center">text</div>
</div>
</div>
к сожалению, нельзя использовать float:left для вложенного контейнера
Илья
13.08.2007
Юлия
03.09.2007
Natalia
01.10.2007
Есть вопрос: как в слое с заданной высотой отцентрировать текст по вертикали, т.е. есть ли аналог valign="middle" для слоев?
Влад Мержевич
15.10.2007
Черничкин Станислав
29.02.2008
Андрей
25.03.2008
Слава
02.04.2008
Alex
07.06.2008
Сергей
14.06.2008