Выравнивание контента - контентовая версия

Выравнивание контента определяет его внешний вид и ориентацию краев абзаца и может выполняться по левоой стороне, правому краю, по центру или по ширине. В табл. 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
Код ШТМЛ	Описание
<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 показано, как в подобном случае устанавливать выравнивание.

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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. Выравнивание контента по правому и левому краю

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