Тарифы Услуги Сим-карты

Выравнивание текста в CSS: свойство text-align. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы

Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах.

Один из самых простых и удобных тегов – CENTER предназначен для выравнивания блока текста. С помощью этого тега также можно центрировать рисунки и таблицы. Исключение составляют элементы или для которых выравнивание задается свойствами тега IMG. Так, если поместить элемент внутри тега CENTER, рисунок окажется выровненным по правому краю.

Пример 4.1. Центрирование с помощью тега CENTER


Данный текст будет выровнен по центру окна браузера, а нижележащий
рисунок по правому краю.

Формально CENTER должен использоваться только как параметр других блочных тегов (P, PRE и другие). Однако в браузере Netscape Navigator 2.0 CENTER был введен как самостоятельный тег. Это дополнение было призвано убрать лишний вертикальный отступ, который появляется при использовании блочных тегов. Если вместо тега CENTER текст поместить внутрь параграфа (

) , появляется дополнительный вертикальный отступ между горизонтальной линией и этим текстом.

CENTER не входит в спецификацию HTML. В «официальном» HTML форматирование, такое как выравнивание текста должно производится через атрибуты тегов (например,

) или с использованием стилей. Тем не менее, этот тег обрел право на существование. Однако после опубликования спецификации HTML 4 W3 Консорциум рекомендовал воздержаться от использования тега CENTER, а вместо него использовать элемент

...
, как показано в примере 4.2.

Пример 4.2. Центрирование с помощью тега DIV




Выравнивание текста по центру с помощью тега DIV

Еще один способ центрирования заключается в использовании стилей. Стили представляют собой инструкции, которые позволяют управлять атрибутами форматирования как шрифт, цвет, выравнивание и др. Пример переопределения тега P для центрирования текста.

Пример 4.3. Центрирование с помощью стилей






Теперь, когда вы будете использовать тег P с вышеуказанным
стилем, текст параграфа будет выровнен по центру окна браузера



Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.

Синтаксис CSS text-align

... text-align : center | justify | left | right | inherit ; ...
  • center - выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
  • justify - растягивание текста по всей ширине области
  • left - выравнивание по левому краю
  • right - выравнивание по правому краю
  • inherit - принять значение предка (родителя)

Чаще всего эти свойства применяются в блоках

и абзацах

Примечание:
Есть также свойство vertical-align , которое отвечает за вертикальное выравнивание.

Как сделать выравнивание текста в html

Пример №1.

Выравнивание текста по левому краю. Действуют по умолчанию.

Выравнивание текста по левому краю

Выравнивание текста по левому краю

Пример №2. Выравнивание текста и картинки по центру

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

Выравнивание текста по центру

На странице преобразуется в следующее

Выравнивание текста по левому краю

Пример №3. Выравнивание текста по правому краю

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

Выравнивание текста по правому краю

На странице преобразуется в следующее

Выравнивание текста по правому краю

Пример №4. Выравнивание текста по ширине всей области

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

На странице преобразуется в следующее

Выравнивание текста по ширине всей области

Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Примечание

Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

Выравнивание по центру

Выравнивание текста по ширине всей области

... ...

Разница в тегах

и

В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

Большинство из нас со школьной скамьи имеют четкое представление об идеально оформленной странице. Равномерная россыпь букв, стройные линии слов, строгий, обрамленный ровными полями прямоугольник текста - именно такую картину мы наблюдаем, перелистывая любое печатное издание. Велик соблазн изобразить что-то подобное и на web-странице, тем более что для этого предложено всем известное средство - выравнивание текста по ширине. Однако что хорошо для типографа, то смертный грех для веб-верстальщика. А все потому, что применительно к разметке сайта эта функция обрастает таким количеством недостатков, что ее единственное достоинство в виде ровненького правого края просто меркнет на глазах. Вот лишь несколько причин, по которым стоит отказаться от выравнивания по ширине в пользу выравнивания по левому краю.

Видимый беспорядок внутри текстового блока

Да-да, чем ровнее края текстового блока, тем очевиднее бардак внутри него. В типографском деле стройности текста позволяет добиться целый арсенал инструментов: переносы, регулировка интервалов между словами и расстояний между буквами и даже чуть более широкие или чуть более узкие варианты шрифта. А вот макет интернет-страницы предполагает, как правило, только один способ «растянуть» строку от края до края - неконтролируемое увеличение ширины пробелов. Мало того, что это приводит к появлению неприглядных зазоров между словами, так эти зазоры, словно по закону подлости, частенько приходятся примерно на одно и то же место в каждой строке, образуя так называемые вертикальные «реки». Все это придает тексту весьма неопрятный вид.

Нечитабельность

Но если эстетикой еще можно было бы пожертвовать ради аккуратных краев, то вот очевидные проблемы с визуальным восприятием текста - все-таки слишком высокая плата за них. А выровненный по ширине текст объективно гораздо менее читабелен, чем выровненный по левому краю. Главная причина кроется все в тех же увеличенных интервалах между словами: глаз постоянно вынужден выискивать начало следующего слова, а из-за разности пробелов от строки к строке еще и перестраиваться с одного расстояния на другое.

Необходимость работать над длиной строки, зачастую безрезультатно

Справедливости ради стоит отметить, что обозначенные недостатки выровненного текста могут быть уменьшены за счет увеличения длины строки. Однако далеко не всегда этот метод будет эффективен. А вот снизить читаемость он может с очень большой долей вероятности: глазам трудно, просканировав до конца одну длинную строчку, точно и быстро перескочить на начало следующей.

Неприспособленность под мобильные устройства

Чем уже колонка с текстом, тем в меньшей степени он подлежит выравниванию по ширине. И здесь такой формат вступает в прямое противоречие с требованиями мобильных устройств, для которых, наоборот, чем короче строка, тем лучше. Согласитесь, одно дело следить взглядом за длинной строчкой на полноэкранном мониторе, и совсем другое - раз за разом прокручивать каждую строку назад и вперед. Сомнительное удовольствие, зато верный способ растерять мобильную аудиторию!

Казалось бы, стоит добавить на страницу функцию переноса слов, и все эти проблемы, возникающие при выравнивании текста по ширине страницы, были бы решены. Но в том-то и загвоздка, что HTML-разметка такой функции не предполагает. Вот и получается, что на сегодняшний день никакого другого способа сохранить допустимые интервалы между словами на web-странице, кроме как выравнивание текста по краю, не существует.

Таким образом, при создании интернет-страницы важно помнить главное: web-сайт - это не книга, и подходить к его оформлению нужно с тех позиций, которые диктуют технологии и психология воприятия, а не чьи-то эстетические воззрения, впрочем, весьма и весьма условные. Поверьте, если ваш текст будет аккуратно размещен и, в первую очередь, легко и с удовольствие читаем, никто и внимания не обратит на такую мелочь, как неровность полей!

Кстати, когда вы читали эту статью, вы обратили внимание на то, что текст не выровнен по ширине?

Html существует универсальный параметр и зовется он ALIGN. Его можно применять с различными тегами html:

p | h1 | div | table | thead | tbody | tfoot | tr | th | td

Возможные значения:

Center - выравнивание по центру
Left - выравнивание по левой стороне
Right - по правой
Justify - по ширине, по левому и правому краю. При этом возможно появление больших промежутков между словами.

Текст выравнивается по ширине

Внешний вид в браузере:

Заголовок выравнивается по центру

Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине. Текст выравнивается по ширине.

Содержимое данного блока выравнивается по правой стороне

Замечу, что выравнивание по левому краю происходит автоматически. Поэтому такое значение параметра align указывать нет нужды.

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

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

Для установки выравнивания текста обычно используется тег абзаца

С атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега

с аналогичным атрибутом align , как показано в табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align
Код HTML Описание
Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.

Текст

Выравнивание по центру.

Текст

Выравнивание по левому краю.

Текст

Текст

Выравнивание по ширине.
Текст Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег .
Текст
Выравнивание по центру.
Текст
Выравнивание по левому краю.
Текст
Выравнивание по правому краю.
Текст
Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.

Отличие между абзацем (тег

) и тегом

в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега
.

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде

. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

Выравнивание текста

Как поймать льва?

Метод перебора

Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.

Метод дихотомии

Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.

Результат примера показан на рис. 1.

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

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