Вирівнювання тексту

Вирівнювання тексту визначає його зовнішній вигляд та орієнтацію країв абзацу і може виконуватися по лівому краю, правому краю, по центру або по ширині. Найбільш поширений варіант - вирівнювання по лівому краю, коли зліва текст зсувається до краю, а правий залишається нерівним. Вирівнювання по правому краю та по центру в основному використовується в заголовках та підзаголовках. Слід пам'ятати, що з використанні вирівнювання по ширині, у тексті між словами можуть з'явитися великі інтервали, що дуже красиво.

Для встановлення вирівнювання тексту зазвичай використовується тег параграфа

з атрибутом align, який визначає спосіб вирівнювання. Також блок тексту можна вирівнювати за допомогою тега з аналогічним атрибутом align . Він може приймати такі значення:

• left - вирівнювання по лівому краю, задається за замовчуванням;
• right - вирівнювання по правому краю;
• center - вирівнювання по центру;
• justify - вирівнювання по ширині (одночасно по правому та лівому краю). Це значення працює тільки для тексту, довжина якого більше одного рядка.

Атрибут align можна застосовувати як тексту, так заголовків (приклад 7.4).

Приклад 7.4. Способи вирівнювання тексту

Як упіймати лева?
Метод перебору
Ділимо пустелю на ряд елементарних ділянок, розмір яких збігається з габаритними розмірами лева, але при цьому менший за розмір клітини. Далі простим перебором визначаємо ділянку, в якій знаходиться лев, що автоматично призводить до його упіймання.
Метод дихотомії
Ділимо пустелю на дві половини. В одній частині – лев, в іншій його немає. Беремо ту половину, в якій знаходиться лев, і знову ділимо її навпіл.Так повторюємо доти, доки лев не виявиться спійманий.

Результат цього прикладу показано на рис.

Рис. 7.4.

Вирівнювання тексту в HTML

Вирівнювання тексту відповідає за його зовнішній вигляд, формування країв абзацу та здійснюється по правому або лівому краю, центру або вирівнювання по ширині.

Існує три способи вирівняти текст за допомогою HTML-коду:

• За допомогою атрибуту тега p;
• Вирівнювання по центру за допомогою тега center;
• Вирівнювання за допомогою блоків div.

Вирівнювання по краях HTML

По краях текст можна вирівняти як за допомогою тега p, так і за допомогою тега div. Для цього використовується атрибут. align:

• align=”right” - Праворуч;
• align = "left" - По лівому краю;

Конструктор сайтів "Нубекс"
Конструктор сайтів "Нубекс"

Тут перша пропозиція вирівнюється праворуч за допомогою тега p, друге - по лівому краю за допомогою тега div.

Вирівнювання по ширині HTML

По ширині текст може бути вирівняний за допомогою тегів p і div:

Конструктор сайтів "Нубекс"
Конструктор сайтів "Нубекс"

HTML вирівнювання по центру

Вирівнювання по центру за допомогою HTML, як ви вже здогадалися, можна здійснити всіма трьома способами:

Конструктор сайтів "Нубекс"
Конструктор сайтів "Нубекс"
Конструктор сайтів "Нубекс"

Вирівнювання CSS

Звичайно, більш «красиво» робити вирівнювання за допомогою CSS.

 .right
Конструктор сайтів "Нубекс"

Тут відбувається вирівнювання тексту з правого краю за допомогою атрибуту CSS text-align.

Дивіться також:

CSS: Вирівнювання тексту

За промовчанням текст на веб-сторінках вирівняний по лівому краю елемента, в якому він розташований, проте використовуючи властивість text-align, можна перевизначити, як вирівнюватимуться рядки тексту щодо меж елемента. Розглянемо кожне з можливих значень:

• left – вирівнює текст по лівому краю.
• right - вирівнює текст праворуч.
• center – вирівнює текст по центру.
• justify - вирівнює текст за шириною, в такому тексті обидва кінці рядка розміщуються впритул до внутрішніх країв елемента. Прогалини між словами в цьому випадку коригуються браузером так, щоб довжина всіх рядків була строго однакова.

Приклад вирівнювання тексту
лютий, 2012
Крім вирівнювання тексту, для першого рядка абзацу було встановлено невеликий відступ, який візуально додає "червоний рядок" до тексту. Цей ефект стане в нагоді на сторінках з великими обсягами тексту, полегшуючи візуальне сприйняття.

Примітка: властивість text-align працює тільки з блоковими елементами, такими як абзац або div, вирівнюючи всередині них весь рядковий вміст, включаючи зображення. Застосування властивості до малих елементів, наприклад посилання або span, не дасть ніякого ефекту.

З цією темою дивляться:

Копіювання матеріалів з даного сайту можливе лише з дозволу адміністрації сайту
та при вказівці прямого активного посилання на джерело.
2011 - 2024 © puzzleweb.ru | razumnikum.ru