Горизонтальное выравнивание

Еще более фундаментальным, чем text-indent, является свойство text-align, определяющее, как выравниваются строки текста элемента относительно границ блока. Первые три значения совершенно просты, но с четвертым и пятым связаны некоторые сложности. Очевидно, что значения left, right и center выравнивают текст элементов так, как следует из их названий. Поскольку text-align применяется только к блочным элементам, таким как абзацы, невозможно выровнять ссылку по центру строки без выравнивания всей строки (да это и нежелательно, т. к., скорее всего, приведет к наложению текста). Для западных языков, которые читаются слева направо, по умолчанию устанавливается значение left. Текст выравнивается по левой границе и имеет неровный правый край (иначе известен как «левостронний» текст). Для таких языков, как иврит и арабский, по умолчанию задается значение right, поскольку они читаются справа налево. Значение center, что не удивляет, центрирует каждую строку текста элемента.

Не исключено, что выражение text-align: center на первый взгляд может показаться аналогичным элементу
, но на самом деле они сильно отличаются.
оказывает влияние не только на текст, но центрирует элементы в целом, например таблицы.


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

Последний вариант горизонтального выравнивания – justify, и с ним связаны некоторые особые вопросы. В выровненном по ширине тексте оба конца строки размещаются вплотную к внутренним краям родительского элемента. Затем пробелы между словами и буквами корректируются так, чтобы длина всех строк была строго одинакова. Выравнивание текста по ширине применяется часто (например, в этой книге), но с появлением CSS начали действовать некоторые дополнительные соображения. Агент пользователя – а не CSS – определяет, каким образом будет растянут выровненный по ширине текст, чтобы заполнить пространство между левым и правым краями родительского элемента. Некоторые броузеры увеличивают только отступы между словами, тогда как другие могут увеличивать интервал между буквами (хотя спецификация CSS особо подчеркивает, что «агенты пользователя не могут увеличивать или уменьшать расстояние между символами», если задано значение свойства letter-spacing).

Некоторые агенты пользователя могут сужать строки, сжимая текст немного больше обычного.


Все эти варианты влияют на представление элемента и даже могут изменить его высоту в зависимости от того, сколько строк текста получается в результате применения того или иного варианта выравнивания агентом пользователя. CSS также не определяет, как должны расставляться переносы.1 Как правило, в текстах, выровненных по ширине, переносы расставляются для разбиения длинных слов, благодаря чему уменьшается расстояние между словами и улучшается внешний вид строки. Однако, поскольку CSS не определяет правила расстановки переносов, агенты пользователя вряд ли будут делать это автоматически. В результате выровненный по ширине текст в случае применения CSS выглядит намного менее привлекательным, чем при печати, особенно когда элементы становятся настолько узкими, что в каждую строку может вместиться лишь несколько слов. Конечно, применение узких элементов не запрещается, но следует помнить об этих недостатках.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста