Вирівнювання тексту
Вирівнювання тексту визначає його зовнішній вигляд і орієнтацію країв абзацу і може виконуватися по лівому краю, правому краю, по центру або по ширині. У табл. 1 показані варіанти вирівнювання блоку тексту.
| Вирівнювання по лівому краю | Вирівнювання по правому краю | Вирівнювання по центру | Вирівнювання по ширині |
|---|---|---|---|
| Текст, який вирівнюється по лівому краю. | Текст, який вирівнюється по правому краю. | Текст, який вирівнюється по центру. | Текст, який вирівнюється по ширині. |
Найпоширеніший варіант - вирівнювання по лівому краю, коли текст зліва зсувається до краю, а правий залишається нерівним. Вирівнювання по правому краю і по центру в основному використовується в заголовках і підзаголовках. Важливо пам'ятати, що при використанні вирівнювання по ширині в тексті між словами можуть з'явитися великі інтервали, що не дуже естетично.
Для встановлення вирівнювання тексту зазвичай використовується тег абзацу <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. Вирівнювання тексту
<!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.
Рис. 1. Вирівнювання тексту по правому та лівому краю
У цьому прикладі вирівнювання заголовка відбувається по центру вікна браузера, виділеного абзацу - по правому краю, а основного тексту - по лівому краю.