it-swarm.com.ru

Как выровнять текст по вертикали во flexbox?

Я хотел бы использовать flex box для вертикального выравнивания некоторого контента внутри <li>, но без особого успеха.

Я проверил онлайн, и многие учебники фактически используют div-обертку, которая получает align-items:center из настроек flex на родительском элементе, но мне интересно, возможно ли вырезать этот дополнительный элемент? 

Я решил использовать flex box в этом случае, так как высота элемента списка будет динамическим%. 

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

256
styler

Edit: Пожалуйста, используйте ответ Michael_B вместо моего. Я бы удалил этот ответ, если бы мог, но принятые ответы не могут быть удалены.


Если вы сделаете flex-direction вертикальным (используя column), то justify-content: center будет центрироваться вертикально. Тогда вы можете просто использовать text-align: center для горизонтального центрирования.

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

Вот оно в действии: http://codepen.io/anon/pen/Fkhgo

339
Ben Visness

Вместо использования align-self: center используйте align-items: center.

Нет необходимости изменять flex-direction или использовать text-align (как предложено в другой ответ ).

Вот ваш код, с одной настройкой, чтобы все это работало:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

Свойство align-self применяется к flex items. За исключением того, что ваш li не является гибким элементом, поскольку его родитель - ul - не имеет примененных display: flex или display: inline-flex.

Следовательно, ul не является гибким контейнером, li не является гибким элементом, и align-self не действует.

Свойство align-items аналогично align-self, за исключением того, что оно применяется к гибкие контейнеры.

Поскольку li является гибким контейнером, align-items может использоваться для вертикального центрирования дочерних элементов.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

кодовая демонстрация


Технически, вот как работают align-items и align-self ...

Свойство align-items (для контейнера) устанавливает значение по умолчанию align-self (для элементов). Следовательно, align-items: center означает, что все элементы flex будут установлены в align-self: center.

Но вы можете изменить это значение по умолчанию, настроив align-self для отдельных элементов. 

Например, вам могут потребоваться столбцы одинаковой высоты, поэтому для контейнера задано значение align-items: stretch. Тем не менее, один элемент должен быть прикреплен к вершине, поэтому он установлен на align-self: flex-start.

пример


Как текст является гибким элементом?

Некоторые люди могут задаваться вопросом, как бег текста ...

<li>This is the text</li>

является дочерним элементом li.

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

Из спецификации CSS:

9.2.2.1 Анонимный встроенный коробки

Любой текст, который непосредственно содержится внутри элемента контейнера блока должен рассматриваться как анонимный встроенный элемент.

Спецификация flexbox предусматривает аналогичное поведение.

4. Гибкие элементы

Каждый входящий дочерний элемент гибкого контейнера становится гибким элементом, а каждый непрерывный прогон текста, который непосредственно содержится внутри flex Контейнер завернут в анонимный элемент Flex.

Следовательно, текст в li является гибким элементом.

308
Michael_B

Для будущих гуглеров, 

Ответ, получивший наибольшее количество голосов, и второй по значимости также - для решения этой конкретной проблемы опубликован OP, где контент (текст) был "алгоритмически союзником", заключенным во встроенный элемент блока. НО, ваш случай может быть о центрирование нормального элемента вертикально внутри контейнера , что также применимо в моем случае, так что для этого все, что вам нужно, это 

align-self: center;

Просто выкладываю это здесь, так как это лучший результат для вышеупомянутого запроса, а также я был довольно смущен в течение некоторого времени * Derp *

11
Mohd Abdul Mujib

Лучшее решение - просто вложить flexbox внутрь flexbox . Все, что вам нужно сделать, это дать ребенку align-items: center. Это будет вертикально выравнивать текст внутри его родителя.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}
5
staypuftman

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

0
Swapnil