Выравнивание содержимого блока по горизонтали (свойство text-align) | CSS

text-align

Свойство text-align наследуется, применяется к блочным элементам, изменяет текст и строчные элементы
	start	при direction: ltr; содержимое выравнено по левому краю, при direction: rtl; — по правому
	end	при direction: ltr; содержимое выравнено по правому краю, при direction: rtl; — по левому
	left	содержимое выравнено по левому краю
	right	содержимое выравнено по правому краю
	center	содержимое выравнено по середине
	justify	содержимое последней строки выравнено как при значении start, если иное не указано в свойстве text-align-last, остальные строчки выравнены по ширине
	justify-all	содержимое выравнено по ширине
	match-parent	если родителю заданы свойства direction: ltr; и text-align: start;, то содержимое выравнено по левому краю, если direction: rtl; и text-align: start;, то — по правому; если родителю заданы свойства direction: ltr; и text-align: end;, то содержимое выравнено по правому краю, если direction: rtl; и text-align: end;, то — по левому
	initial	start
	inherit	наследует значение родителя
	unset	наследует значение родителя

<style>
div {
  text-align: start;
}
</style>

<div>Свойство <code>text-aligng</code> наследуется, применяется к блочным элементам, изменяет текст и строчные элементы</div>

Что такое text-align CSS

Свойство text-align, применённое к блоку, выравнивает по горизонтали текст и строчные дочерние элементы.

span
текст

<style>
.raz {
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
.raz div {
  width: 50%;
  min-height: 2em;
  display: inline-block;
}
.raz div,
.raz span {
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div class="raz">
  <div></div><br>
  <span>span</span><br>
  текст
</div>

Свойство text-align не работает, так как

Не передвигает блочные элементы

<style>
.raz {
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
.raz div {
  width: 50%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div class="raz">
  <div></div>
</div>

Не перемещает сам элемент

<style>
.raz {
  border: 1px solid green;
  background: yellowgreen;
}
.raz div {
  display: inline-block;
  width: 50%;
  min-height: 2em;
  border: 1px solid orange;
  text-align: center;
  background: #fff5d7;
}
</style>

<div class="raz"><div></div></div>

Не реагирует, если задано строчному элементу

текст

<style>
.span {
  width: 9999px; /* свойство width не изменяет ширину строчного элемента: его ширина — это ширина его содержимого */ 
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
</style>

<span class="raz">текст</span>

Статьи по теме:

1. Как выравнять блок по середине по горизонтали
2. Как выровнять блок по середине по вертикали
3. Как выровнять блок по правой стороне родителя

Как работает text-align: justify;

свойство text-align имеет значение justify

Жили-были лиса да заяц. У лисы была избушка ледяная, у а зайчика лубяная. Пришла весна — у лисицы избушка-то и растаяла, а у зайчика стоит по-старому. Лиса попросилась к зайчику погреться да его из избушки-то и выгнала. Идёт зайчик и плачет, а навстречу ему собаки.

— О чём, зайчик, плачешь?

<style>
p {
  text-align: justify;
}
</style>

<p>Жили-были лиса да заяц. У лисы была избушка ледяная, у а зайчика лубяная. Пришла весна — у лисицы избушка-то и растаяла, а у зайчика стоит по-старому. Лиса попросилась к зайчику погреться да его из избушки-то и выгнала. Идёт зайчик и плачет, а навстречу ему собаки.
<p>— О чём, зайчик, плачешь?

Свойство text-align в значении justify растягивает содержимое так, чтобы и правый, и левый край текста были ровными. Без полей первый и последний символ строки соприкасается с границей элемента. Исключения:

1. красная строка (первая строка абзаца) может быть отодвинута на расстояние, указанное