Властивість CSS text-align відповідає за горизонтальне вирівнювання тексту, а також картинок та інших елементів. Властивості є 4 можливі варіантивирівнювання.
Синтаксис CSS text-align
... text-align : центр | 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 не делает.
HTML теги, определяющие выравнивание текста, отступ
Выровненный по ширине текст используется в типографии
В примере ниже показано, как выровнить текст по ширине страницы:
| align="left" | align="right" |
|---|---|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
|
| align="justify" | align="center" |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.
Выравнивание текста в HTML по центру и по ширине
Выравнивание текста в HTML по центру, текст справа :
Результат:
Атрибуты и значения
- align="left" - определяет выравнивание текста слева (по умолчанию).
- align="center" - выравнивает текст по центру .
- align="right" - выравнивает текст справа .
Выравнивание | HTML отступ текста
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
Результат:
Посмотреть в новом окне.
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
| 3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ | ||
Краткая информация
Версии CSS
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.HTML5 CSS2.1 IE Cr Op Sa Fx
Результат цього прикладу показано на рис. 1.
Мал. 1. Вирівнювання тексту у браузері Safari
Internet Explorer до версії 7.0 включно дещо інакше трактує цей приклад, ніж інші браузери, вирівнюючи як текст, а й блоки (рис. 2).
Мал. 2. Вирівнювання тексту в браузері Internet Explorer 7
Об'єктна модель
document.getElementById("elementID ").style.textAlign
Браузери
IE до версії 7.0 включно вирівнює як вміст блокового елемента, а й сам елемент.
Властивість text-align-last ( не плутати з HTML align) визначає, як вирівнюватиметься останній рядок блоку або рядок перед примусовим розривом. Це важливо, оскільки в останньому рядкуабзацу, як правило, не містить достатньо тексту, щоб заповнити весь простір.
У цій статті ми розглянемо всі аспекти, що стосуються властивості text-align-last , у тому числі значення, що приймаються, і підтримку браузерами.
Використання та значення, що приймаються
Застосовувати властивість text-align-last легко. Ось фрагмент коду для вирівнювання останнього рядка тексту з правого краю:
Intro-graph (text-align: justify; // Required for IE and Edge text-align-last: right; )
Властивість може набувати сім значень. Вам, ймовірно, відомі стандартні значення HTML text align: left, right та center. Вони вирівнюють текст в останньому рядку праворуч, лівим краєм і центром контейнера.
Наведений нижче приклад ілюструє різницю між цими трьома значеннями:
Подивитися приклад
Четверте значення, justify, вирівнює останній рядок таким чином, що текст рівномірно розподіляється по всій ширині контейнера. Це досягається за рахунок додавання відповідної кількості прогалин між словами. Залежно від кількості тексту цю властивість можна використовувати, щоб повністю заповнити простір в останньому рядку, але не отримати занадто великі розриви між словами.
Текст у другому абзаці також розподілено за шириною, але оскільки останній рядок містить лише одне слово, воно розташовується ліворуч.
Подивитися приклад
Вирівнювання останнього рядка тексту по лівому краю підходить для мов, які читаються зліва направо ( LTR), але це буде неправильно для мов RTL. У разі використання значень left чи right може викликати проблеми.
На щастя, можна використовувати значення start, щоб вирівняти текст по краю, з якого починається написання та читання. Це означає, що, встановивши для властивості text-align-last значення start , ви вирівняєте текст лівим краєм для мов LTR і правим краєм для мов RTL .
Також можна використовувати значення end , щоб вирівняти текст протилежним краєм від того, з якого починається написання і читання. Це відповідатиме значення right для мов LTR та left для мов RTL.
Подивитися приклад
Значення за промовчанням для цієї властивості auto . У разі його використання текст в останньому рядку вирівнюється відповідно до значення властивості HTML text align, якщо тільки для нього не встановлено значення justify. Інакше текст розподіляється по ширині контейнера, тільки якщо для властивості text-justify встановлено значення distribute . В іншому випадку текст вирівнюється по краю, з якого починається написання та читання.
Важливі зауваження
Щоб text-align-last працювало, для властивості text-align має бути задано значення justify. Але це правило реалізовано тільки в IE та Edge. Firefox і Chrome властивість працює і без установки для text-align значення justify . У наведеному нижче прикладі текст повинен бути вирівняний праворуч в Edge та IE. В інших браузерах останні рядки абзаців будуть вирівнюватися відповідно до значення властивості text-align-last , а інші рядки будуть вирівняні праворуч.
Подивитись демо-версію
Якщо ми не задаємо для text-align значення align justify HTML, результат виглядає менш привабливо. Тому ви, найімовірніше, встановите розподіл тексту за шириною.
Властивість працює, навіть якщо в абзаці є примусовий розрив рядка, заданий за допомогою тега
або чогось у цьому роді. Майте на увазі, що ця властивість впливатиме на всі останні рядки тексту всередині зазначеного елемента, а не тільки на крайню. Наприклад, якщо текст усередині елемента article або div містить три абзаци, у кожному з них останній рядок вирівнюватиметься відповідно до значення властивості text-align-last , заданого для всього батьківського елемента.
Якщо потрібно вирівняти тільки останній рядок контенту, то можна використовувати селектори :last-child або :last-of-type . Візьміть код із наведеної нижче демо-версії як приклад:
article (text-align: justify;) article p:last-of-type (text-align-last: right; )
Він вирівнює останній рядок останнього абзацу нашої статті з правого краю. Інші рядки вирівнюються на основі значення властивості HTML text align.
Подивитись демо-версію
Також можна використовувати інші селектори: :even і :odd для зміни вирівнювання.
Іноді абзац може складатися лише з одного рядка. У цьому випадку, якщо ви вказали значення і для властивості text-align, і для властивості text-align-last, то остання властивість матиме пріоритет.
Розглянемо наступний фрагмент коду:
p (text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )
Якщо другий абзац має лише один рядок, текст вирівнюватиметься по лівому краю, тому що text-align-last матиме пріоритет. У наведеній нижче демо-версії показано цей код CSS у дії, а також кілька інших прикладів HTML align.
Подивитись демо-версію
Підтримка браузерами
Підтримка цієї властивості може бути включена за допомогою опції « Включити експериментальні функції веб-платформи» в Google Chromeі Opera, починаючи з версій 35 і 22 відповідно. Воно повністю підтримується в Chrome 47+ та Opera 34+.
Щоб використовувати цю властивість у Firefox, доведеться додавати префікс -moz-. Значення start і end не підтримуються IE. У той же час, Edge повністю підтримує цю властивість. Єдиний популярний браузер, який повністю не підтримує text-align-last – це Safari.
Задає вирівнювання останнього рядка текстового блоку.
коротка інформація
Позначення
| Опис | приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <размер> |
| A && B | Значення мають виводитися у вказаному порядку. | <размер> && <цвет> |
| A | B | Вказує, що треба вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку. | width || count |
| Групує значення. | [crop || cross] | |
| * | Повторювати нуль чи більше разів. | [,<время>]* |
| + | Повторювати один чи більше разів. | <число>+ |
| ? | Зазначений тип, слово чи група не є обов'язковим. | inset? |
| (A, B) | Повторювати щонайменше A, але з більше разів. | <радиус>{1,4} |
| # | Повторювати один або більше разів через кому. | <время># |
Значення
auto Збігається з вирівнюванням, заданим властивістю text-align , крім значення justify . Для нього вирівнювання буде як start. start Рядок вирівнюється по початковому краю блоку, який може змінюватись в залежності від напрямку тексту (зліва направо або праворуч наліво). end Рядок вирівнюється по кінцевому краю блоку, він визначається напрямом тексту. left Рядок вирівнюється по лівому краю. right Рядок вирівнюється праворуч. center Рядок вирівнюється по центру. Justify Рядок вирівнюється по ширині. Якщо в останньому рядку тільки одне слово, воно буде вирівняне по лівому краю.
Вплив різних значеньна положення тексту показано у табл. 1.
| Значення | Вирівнювання | Вид тексту |
|---|---|---|
| left | Ліворуч | |
| right | Праворуч |  |
| center | По центру |  |
| justify | По ширині |  |
Пісочниця
Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
div (text-align-last: start;)
приклад
Об'єктна модель
Об'єкт.style.textAlignLast
Примітка
Internet Explorer та Edge не підтримують значення start та end.
Firefox до версії 49 підтримує властивість -moz-text-align-last.
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
- Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників щодо реалізації стандарту.
- Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
- Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
- Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
