Выключка

Метки:

текст

Выключкой называется выравнивание краев текстового блока относительно родительского элемента. Различают четыре типа выключки: по левому краю, по правому краю, по центру и по формату (ширине). По умолчанию текст выравнивается по левому краю.

Чтобы задать способ выравнивания, используется стилевое свойство text-align со следующими значениями.

left

Выравнивание текста по левому краю (рис. 1). В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.

Рис. 1

Рис. 1. Выключка по левому краю

right

Выравнивание текста по правому краю (рис. 2). Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк.

Рис. 2

Рис. 2. Выключка по правому краю

center

Выравнивание текста по центру (рис. 3). Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.

Рис. 3

Рис. 3. Выключка по центру

justify

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю (рис. 4). Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Рис. 4

Рис. 4. Выключка по ширине

В примере 1 показано выравнивание текста по центру.

Пример 1. Выключка по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Выключка</title>
  <style type="text/css">
   P {
    text-align: center; /* Выравнивание по центру */
    margin: 0 0 3px; /* Отступы в абзаце */
   }
   P.author {
    font-style: italic; /* Курсивное начертание */
    text-align: right; /* Выравнивание по правому краю */
    margin-top: 15px; /* Отступ сверху */
   }
  </style>
 </head>
 <body>
  <p>— Да вы же бандиты!</p>
  <p>— Не спорим, бандиты!</p>
  <p>Зато мы обуты, одеты и сыты.</p>
  <p>Вон мальчик на нас как печально глядит —</p>
  <p>Жалеет бедняжка, что он — не бандит...</p>
  <p class="author">Борис Заходер</p>
 </body>
</html>

В данном примере стихотворение выравниваются по центру окна браузера, а имя автора — по его правому краю. Это достигается за счет создания класса с именем author и настройки выравнивания текста.

Термины

Выключка

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