HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут text-align в CSS

Атрибут text-align в CSS

1026

Визначає горизонтальне вирівнювання тексту в межах елемента.

Коротка інформація

Значення за замовчуванням left
Успадковується Так
Застосовується До блокових контейнерів
Анімується Ні

Синтаксис 

<code>text-align: центр | Justify | left | right | start | end

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

center
Вирівнювання тексту по центру. Текст міститься по центру горизонталі вікна браузера або контейнера, де розташований текстовий блок. Рядки тексту начебто нанизуються на невидиму вісь, яка проходить центром веб-сторінки. Подібний спосіб вирівнювання активно використовується в заголовках та різних підписах, на кшталт підмалювальних, він надає офіційного та солідного вигляду оформленню тексту. У всіх інших випадках вирівнювання по центру застосовується рідко з тієї причини, що читати великий обсяг такого тексту незручно. Щоб зробити це, браузер у цьому випадку додає пробіли між словами.
left
Вирівнювання тексту по лівому краю. У цьому випадку рядки тексту вирівнюється по лівому краю, а правий край розташовується «драбинкою». Такий спосіб вирівнювання є найбільш популярним на сайтах, оскільки дозволяє користувачеві легко відшукувати поглядом новий рядок і комфортно читати великий текст. Вирівнювання тексту з правого краю. Цей спосіб вирівнювання виступає у ролі антагоніста попереднього типу. А саме, рядки тексту дорівнюють праворуч, а лівий залишається aquo;рваним». Через те, що лівий край не вирівняний, а саме з нього починається читання нових рядків, такий текст читати важче, ніж, якщо він був вирівняний по лівому краю. Тому вирівнювання з правого краю застосовується зазвичай для коротких заголовків обсягом трохи більше трьох рядків. Ми не розглядаємо специфічні сайти, де текст доводиться читати праворуч, там можливо подібний спосіб вирівнювання і знадобиться.
start
Аналогічно до значення left, якщо текст йде ліворуч і right , коли текст йде справа наліво.
end
Аналогічно значенню right, якщо текст йде ліворуч і left, коли текст йде справа наліво.

Пісочниця

6-desktop playground-values"> 
div { text-align: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align</title> <style> div { border: 1px solid black; /* Параметри рамки */
padding: 5px; /* Поля навколо тексту */
margin-bottom: 5px; /* Відступ знизу */
} 
#left { text-align: left; } 
#right { text-align: right; } 
#center {text-align: center; } 
.content { width: 75%; /* Ширина шару */
background: #fc0; /* Колір тла */
}
</style>
</head>
<body> <div id="left"><div class="content">Вирівнювання по лівому краю</div></div> <div id="center"><div class="content">Вирівнювання по центру</div></div> <div id="right"><div class="content">Вирівнювання з правого краю</div></div>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Вирівнювання тексту

Мал. 1. Вирівнювання тексту

Internet Explorer до версії 7.0 включно дещо інакше трактує даний приклад, ніж інші браузери, вирівнюючи не тільки текст, а й блоки (мал. 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 (Можлива рекомендація)— група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога співтовариства розробників з реалізації стандарту. поради W3C для остаточного затвердження.
  • Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor 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

Браузери

У таблиці браузерів приклад няються такі позначення.

  •   — властивість повністю підтримується браузером з усіма допустимими значеннями;
  • > — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані у специфікації.

Число вказує версію браузера, починаючи з якої властивість підтримується.

Текст і шрифт
© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS