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



Вирівнювання тексту визначає його зовнішній вигляд і орієнтацію країв абзацу та може виконуватися по лівому краю, правому краю, по центру або по ширині. У табл. 1 показані варіанти вирівнювання блоку тексту.
Табл. 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.
Табл. 2. Вирівнювання тексту за допомогою параметра align
Код 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. Вирівнювання тексту по правому і лівому краю

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


скачать dle 11.0фильмы бесплатно
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
Кликните на изображение чтобы обновить код, если он неразборчив