По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
- left — выравнивает текст по левому краю.
- right — выравнивает текст по правому краю.
- center — выравнивает текст по центру.
- justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
Попробовать »
Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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. |
| Код HTML | Описание |
|---|---|
| Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. | |
| Выравнивание по центру. | |
| Выравнивание по левому краю. | |
| Выравнивание по правому краю. | |
| Выравнивание по ширине. | |
| Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег . |
| Выравнивание по центру. | |
| Выравнивание по левому краю. | |
| Выравнивание по правому краю. | |
| Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.
Отличие между абзацем (тег
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде
Пример 1. Выравнивание текста
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Иногда вам может понадобиться разместить название, какую-то фразу или целый фрагмент текста по левому, правому краю страницы или по центру страницы или задать определённый отступ.
Из этого урока вы как раз и узнаете, как делать всё выше описанное.
Существую три стандартных атрибута для выравнивания текста:
• align=»left» – текст слева.
• align=»right» – текст справа.
• align=»center» – текст по центру.
Так же есть такой атрибут как align=»justify» – он выравнивает текст по ширине. Это тоже самое что в «Microsoft Word». Ниже представлен код в котором это демонстрируется.
Текст строго по центру.
Поместите между этими тегами большой текст и увидите, что будет.
| Отступ текста HTML |
Для отступа слева есть два простых способа:
Первый это теги
, но размер отступа текста заключённого между этими тегами конечно же фиксированный.
Второй способ – это CSS атрибут
text-indent. Размер отступа задаётся в пикселях.
Ниже представлен код и результат его работы.