box-align

Нестандартный: Эта функция нестандартна и не находится на пути к стандартизации. Не используйте её на сайтах, работающих в Интернете: она не будет работать для каждого пользователя. Также могут быть существенные несовместимости между реализациями, и поведение может измениться в будущем.

Устаревший: Данная функция больше не рекомендуется. Хотя некоторые браузеры могут её поддерживать, она могла быть удалена из соответствующих веб-стандартов, может быть в процессе удаления или сохраняется только для совместимости. Избегайте её использования и, при возможности, обновите существующий код; обратитесь к таблице совместимости в конце этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любое время.

Предупреждение: Это свойство исходного черновика модуля CSS гибкого макета, и оно было заменено более новым стандартом.

Свойство 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;

Свойство box-align задаётся одним из ключевых значений, перечисленных ниже.

Значения

start: Блок выравнивает содержимое в начале, оставляя любое дополнительное пространство в конце.
center: Блок выравнивает содержимое по центру, деля любое дополнительное пространство поровну между началом и концом.
end: Блок выравнивает содержимое в конце, оставляя любое дополнительное пространство в начале.
baseline: Блок выравнивает строки содержимого (выравнивает текст). Это относится только в том случае, если ориентация блока горизонтальная.
stretch: Блок растягивает содержимое так, что дополнительного места в блоке нет.

Примечания

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

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

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

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

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

Начальное значение	`stretch`
Применяется к	элементам с значением CSS `display` `box` или `inline-box`
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

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

Примеры

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`box-align`	1	12	491	15	31.1–3	18	494	14	1	1.0	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-align