text-align

CSS-властивість text-align (укр. — “вирівнювання тексту”) використовується для задання горизонтального вирівнювання тексту та інших внутрішніх елементів в межах контейнера. Вона впливає на відображення тексту в елементах, таких як параграфи, заголовки, списки та інші блочні елементи.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

text-align: left | right | center | justify | start | end;

Значення

  • left — вирівнює текст по лівому краю елемента.
  • right — вирівнює текст по правому краю елемента.
  • center — вирівнює текст по центру елемента.
  • justify — вирівнює текст так, щоб між словами була рівномірна відстань, створюючи рівномірний лівий і правий край.
  • start — вирівнює текст відповідно до початку напрямку тексту (для лівосторонніх мов це буде лівий край, для правосторонніх — правий).
  • end — вирівнює текст відповідно до кінця напрямку тексту (для лівосторонніх мов це буде правий край, для правосторонніх — лівий).

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість text-align впливає лише на горизонтальне вирівнювання тексту в елементах блочного типу, таких як <div>, <p>, <h1>, <ul> тощо.
  • justify особливо корисно для створення тексту з рівномірним відступом між словами в ширших блоках, часто використовується для газетного стилю або довгих абзаців.
  • Використання start і end може бути корисним при локалізації для мов з різними напрямками написання.
  • text-align не впливає на вертикальне вирівнювання елементів.
  • Властивість text-align не підтримується в деяких спеціальних випадках, таких як всередині внутрішніх елементів <table>, для яких існують окремі властивості вирівнювання.
  • Підтримується всіма сучасними браузерами.