CSS-свойство `box-align`

Свойство box-align CSS задаёт выравнивание содержимого элемента в перпендикулярном направлении относительно его макета. Эффект этого свойства виден только при наличии свободного пространства в блоке.

Информацию о действующем стандарте см. в разделе flexbox.

Направление макета зависит от ориентации элемента: горизонтальной или вертикальной.

Синтаксис

/* Keyword values */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

start

Блок выравнивает содержимое по началу, оставляя свободное пространство в конце.

center

Блок выравнивает содержимое по центру, равномерно распределяя свободное пространство между началом и концом.

end

Блок выравнивает содержимое по концу, оставляя свободное пространство в начале.

baseline

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

stretch

Блок растягивает содержимое так, чтобы в блоке не оставалось свободного пространства.

Примечания

Край блока, обозначенный как начало для целей выравнивания, зависит от ориентации блока:

• Для горизонтальных элементов началом является верхний край.
• Для вертикальных элементов началом является левый край.

Противоположный началу край обозначается как конец.

Если выравнивание задано с помощью атрибута align элемента, стиль игнорируется.

Формальное определение

Формальный синтаксис

box-align = start | center | end | baseline | stretch

Примеры

Настройка выравнивания блока

<div class="example">
  <p>I will be second from the bottom of div.example, centered horizontally.</p>
  <p>I will be on the bottom of div.example, centered horizontally.</p>
</div>

div.example {
  display: box; /* As specified */
  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* Make this box taller than the children,
     so there is room for the box-pack */
  height: 400px;

  /* Make this box wider than the children
     so there is room for the box-align */
  width: 300px;

  /* Children should be oriented vertically */
  box-orient: vertical; /* As specified */
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* Align children to the horizontal center of this box */
  box-align: center; /* As specified */
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* Pack children to the bottom of this box */
  box-pack: end; /* As specified */
  -moz-box-pack: end; /* Mozilla */
  -webkit-box-pack: end; /* WebKit */
}

div.example > p {
  /* Make children narrower than their parent,
     so there is room for the box-align */
  width: 200px;
}

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

См. также

• align-items, box-orient, box-direction, box-pack