Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому, правому краю, по центру или по ширине.
| Выравнивание по левому краю | Выравнивание по правому краю | Выравнивание по центру | Выравнивание по ширине |
|---|---|---|---|
| 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. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
| Код HTML | Описание | Пример |
|---|---|---|
| <p>Текст</p> | Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом автоматически добавляется пустая строка. |
Текст |
| <p align=left>Текст</p> | Выравнивание по левому краю. |
Текст |
| <p align=right>Текст</p> | Выравнивание по правому краю. |
Текст |
| <p align=center>Текст</p> | Выравнивание по центру. |
Текст |
| <p align=justify>Текст</p> | Выравнивание по ширине. |
Текст по ширине |
| <nobr>Текст</nobr> | Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст<wbr> | Разрешает браузеру делать перенос строки в указанном месте, даже если используется NOBR тег. | |
| <center>Текст</center> | Выравнивание по центру. |
|
| <div align=center>Текст</div> | Выравнивание по центру. |
Текст
|
| <div align=left>Текст</div> | Выравнивание по левому краю. |
Текст
|
| <div align=right>Текст</div> | Выравнивание по правому краю. |
Текст
|
| <div align=justify>Текст</div> | Выравнивание по ширине. |
Текст по ширине
|
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что параметр align=left можно опустить.
Основное отличие между параграфом (тег P) и тегом DIV в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега DIV.