Вертикально центрируйте элементы с помощью flexbox

Я пытаюсь вертикально центрировать элементы с помощью CSS 'flexbox; и я знаю, как это сделать с кодом, отличным от поставщика, но даже с префиксами поставщика я не могу заставить его работать в Webkit (Chrome).

Я пытаюсь вертикально выровнять промежутки в #trigger.

Вот мой CSS:

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

Любые идеи, что я делаю неправильно?

И если вы знаете префиксы/версии других поставщиков, которые я использую, не стесняйтесь делиться ими, чтобы это могло работать не только в Webkit.

Ответы

Ответ 1

Свойство align-items предназначено для контейнеров flex (элементы с display: flex, примененные к ним), а не для гибких элементов (дети из гибких контейнеров). Старая спецификация 2009 года не имеет свойства, сопоставимого с align-items; свойство box-align с 2009 года соответствует align-content из стандартной спецификации.

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}

<div id="trigger">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>

Ответ 2

Вертикально выровненный макет может быть достигнут со следующими свойствами, обратите внимание, что это использует старый синтаксис, хотя я тестировал последние сборки Chrome, Firefox и Firefox Aurora -

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orient указывает, как должны быть выровнены дочерние элементы окна, что в нашем случае является вертикальным.

box-pack выравнивает дочерние элементы вдоль оси прямоугольника.

box-align выравнивает дочерние элементы внутри коробки, ось его перпендикулярна оси прямоугольника, то есть в нашем случае, так как ориентация окна вертикальна, она будет определять выравнивание детей по горизонтали.

Здесь демонстрация Codepen, свойства, которые я применил к элементам диапазона, отличным от display: block, предназначены исключительно для косметических целей.