Выравнивание текста в CSS: свойство text-align
В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:
| Как необходимо выровнять текст? | Подходящее значение |
|---|---|
| По левому краю | left |
| По правому краю | right |
| По центру страницы/блока | center |
| По ширине страницы/блока | justify |
| Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю) | start |
| Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю) | end |
Пример записи стиля:
Рекомендации по использованию стилей
Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине ( justify ) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .
На скриншотах показаны примеры использования различных значений для свойства CSS text-align:
Выравнивание строк по ширине
ljust — это метод строки, который выравнивает текст по ширине, добавляя пробелы в конец текста. Примеры использования:
'a'.ljust(3) # 'a ' 'ab'.ljust(3) # 'ab ' 'abc'.ljust(3) # 'abc' Метод ljust использует вместо пробела другой символ, если передать ему второй необязательный аргумент:
'a'.ljust(3, '_') # 'a__' Исходная строка не обрезается, даже если в ней больше символов, чем нужно:
'abcdefg'.ljust(2) # 'abcdefg' Полная аннотация функции:
str.ljust(width[, fillchar]) -> str rjust
rjust подобно методу ljust выравнивает текст по ширине, но пробелы добавляет в начало текста:
'a'.rjust(3) # ' a' 'ab'.rjust(3) # ' ab' 'abc'.rjust(3) # 'abc' Метод rjust использует вместо пробела другой символ, если передать ему второй необязательный аргумент:
'a'.rjust(3, '_') # '__a' Исходная строка не обрезается, даже если в ней больше символов, чем нужно:
'abcdefg'.rjust(2) # 'abcdefg' Полная аннотация функции:
str.rjust(width[, fillchar]) -> str center
center подобен методам ljust и rjust , он выравнивает текст по ширине, размещает его в центре:
'a'.center(3) # ' a ' 'ab'.center(3) # ' ab' 'abc'.center(3) # 'abc' Метод center использует вместо пробела другой символ, если передать ему второй необязательный аргумент:
'a'.center(3, '_') # '_a_' Исходная строка не обрезается, даже если в ней больше символов, чем нужно:
'abcdefg'.center(2) # 'abcdefg' Полная аннотация функции:
str.center(width[, fillchar]) -> str format
Метод строки format подобен швейцарскому ножу. Он использует специальный язык для описания правил форматирования и способен заменить ljust, rjust и center, как и большинство других методов строки:
"<>".format("a") # "a" "a".ljust(3) # "a " "".format("a") # "a " "a".rjust(3) # " a" "3>".format("a") # " a" - Больше примеров использования
- Официальная документация
Попробуйте бесплатные уроки по Python
Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.
Переходите на страницу учебных модулей «Девмана» и выбирайте тему.
text-align
Определяет горизонтальное выравнивание текста в пределах элемента.
Краткая информация
| Значение по умолчанию | left |
|---|---|
| Наследуется | Да |
| Применяется | К блочным контейнерам |
| Анимируется | Нет |
Синтаксис
text-align: center | justify | left | right | start | endСинтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы произвести это действие, браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остаётся aquo;рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
left center right justify start end
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание текста
Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 7
Объектная модель
Объект.style.textAlign
Примечание
IE до версии 7 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Text Module Level 3 | Рабочий проект |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| left, right, center, justify | 3 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| start, end | 79 | 1 | 15 | 3.1 | 2 |
| left, right, center, justify | 1.5 | 1 | 4 | 1 |
| start, end | 80 | 68 | 46 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- text-align-last
- Свойства текста в CSS
Перевод «выравниванием по ширине» на английский
Основной текст статьи: шрифт 10 пт, обычный; абзац с выравниванием по ширине, красная строка 1 см, горизонтальных и вертикальных отступов нет.
Main text of the article: font 10 pt, normal; a paragraph with alignment in width, a new line of 1 cm, horizontal and vertical indent.
Аннотация статьи должна не превышать 1200 знаков (с пробелами) и располагаться ниже на два пробела от последнего адреса места работы авторов — обычный шрифт (10 pt) с выравниванием по ширине.
The summary of the article should not exceed 1200 signs (with spaces) and should be printed two intervals below the address of the author’s working place in a usual font (10 pt) with full justification.
Аннотация и ключевые слова предоставляются на трех языках (украинском, русском и английском): шрифт 8 пт, обычный; абзац с выравниванием по ширине, горизонтальный отступ слева 1 см, справа 0, вертикальные отступы — до 6 пт, после 0 пт.
Abstract and keywords are provided in three languages (in Ukrainian, English and Russian): 8 pt font, normal; Paragraph with alignment in width, horizontal indent left 1 cm, right 0, vertical indents — up to 6 pt, after 0 pt.
В России традиционным является набор с выравниванием по ширине колонки набора и с вертикальными отступами между абзацами, более известными как «красная строка».
In Russia, a traditional text layout is aligned to the column width and the separation of paragraphs is more commonly known as a «red line».