Выравнивание содержимого блока по горизонтали (свойство 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;

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

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

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

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

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

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

Комментариев нет: