HTML конструювання Вирівнювання тексту визначає його зовнішній вигляд і орієнтацію країв абзацу та може виконуватися по лівому краю, правому краю, по центру або по ширині. У табл. 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 |
Найбільш поширений варіант – вирівнювання по лівому краю, коли зліва текст зсувається до краю, а правий залишається нерівним. Вирівнювання по правому краю і по центру в основному використовується в заголовках і короткий зміст. Слід мати на увазі, що при використанні вирівнювання по ширині в тексті між словами можуть з’явитися великі інтервали, що не дуже красиво.
Для установки вирівнювання тексту зазвичай використовується тег абзацу <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> | Вирівнювання по ширині |
Вирівнювання елементів по лівому краю задано за замовчуванням, тому вказувати його зайвий раз необхідності немає. Так що
Відмінність між абзацом (тег <p>.) і тегом <div>. в тому, що на початку і кінці параграфа з’являється вертикальний відступ, чого немає в разі використання тега <div>.
Атрибут
Приклад 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=utf-8"> <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.
В даному прикладі вирівнювання заголовка відбувається по центру вікна браузера, виділеного абзацу по правому краю, а основного тексту – по лівому краю.