вирівнювання тексту
Вирівнювання тексту визначає його зовнішній вигляд і орієнтацію країв абзацу і може виконуватися по лівому краю, правому краю, по центру або по ширині. У табл. 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. Вирівнювання тексту по правому і лівому краю
В даному прикладі вирівнювання заголовка відбувається по центру вікна браузера, виділеного абзацу по правому краю, а основного тексту - по лівому краю.
Copyright що кредитують © www.htmlbook.ru
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.