CSS text-align — вирівнювання тексту

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

Хоча назва властивості text-align, вона поширюється на весь вбудований вміст блочного контейнера. Тому це не просто вирівнювання тексту - властивість використовується для вирівнювання будь-якого вбудованого вмісту в елементі (якщо він не повністю заповнює контейнер блоку).

Важливо зазначити, що будь-яке вирівнювання, вказане у text-align, не залежить від контейнеру. Блок тексту - це просто стек коробки рядків. Властивість text-align визначає, як кожен лінійний рівень в кожному рядку вирівнюється по відношенню до початкової та кінцевої сторін лінії.

правити

Загальний опис

правити

Нотатка

Не рекомендується використовувати ключові слова start і end. Вони ще на експериментальній стадії розробки.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість text-align може отримувати 8 значень:

left

Вирівнювання тексту по лівій стороні

автор: Svitlana

правити

right

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

автор: Svitlana

правити

center

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

автор: Svitlana

правити

justify

Вирівнювання тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

start

Аналогічно значенню left, якщо текст йде зліва направо і right, коли текст йде справа наліво.

автор: Svitlana

правити

end

Аналогічно значенню right, якщо текст йде зліва направо і left, коли текст йде справа наліво.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	3
left, right, center, justify	1.0	1.0	1.0	3.5	12.0	8.0
start	1.0	1.0	3.1	10.0	Не підтримується	Не підтримується
end	1.0	3.6	3.1	Не підтримується	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
left, right, center, justify	1.5		1.0	1.0
start	1.5		1.0	3.1
end	1.5		3.6	3.1

Приклади

+ запропонувати свій приклад у пісочниці

<h1>По центру</h1>
<h2>Ліворуч</h2>
<h3>Праворуч</h3>

h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }

<div class="cols" lang="uk">
    <div class="col plain">
        <b>justify</b><br>
        Каскадні таблиці стилів визначають зовнішній вигляд документа, написаного мовою розмітки.
    </div>
    <div class="col hyph">
        <b>justify + hyphens</b><br>
        Каскадні таблиці стилів визначають зовнішній вигляд документа, написаного мовою розмітки.
    </div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.6;
    padding: 20px;
}

.cols {
    display: flex;
    gap: 20px;
}

.col {
    width: 190px;
    padding: 10px;
    border: 1px solid #cfd4d9;
    text-align: justify;
}

.hyph {
    hyphens: auto;
}

<p>Вибери потрібні значення для <code>text-align</code>:</p>

<select id="form">
  <option value="left" name="value2" selected>left</option>
  <option value="center" name="value2">center</option>
  <option value="right" name="value2">right</option>
  <option value="justify" name="value2">justify</option>
</select>

<p id="text"></p>

<hr>

<p id="block">Привіт. Я текст :)</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання тексту по лівій стороні',
  'right': 'Вирівнювання тексту по правій стороні',
  'center': ' 	Вирівнювання тексту по центру',
  'justify': 'Вирівнювання тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textAlign = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js

<div class="block"><code>text-align: left;</code></div>
<div class="block center"><code>text-align: center;</code></div>
<div class="block right"><code>text-align: right;</code></div>

.block {
	background-color: #eee;
	margin: 16px;
	padding: 16px;
	font-family: monospace;
	font-size: 17px;
	color: #222;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}