Как вертикально выровнять текст внутри элемента?

Question

Как вертикально выровнять текст внутри элемента?

Я хотел бы использовать 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>

649 5

html css css3 flexbox

5 ответов:

Comments

Ничего не найдено.

Ben Visness · Accepted Answer · 2018-01-25 18:49:51

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

Michael_B · Accepted Answer · 2017-12-13 13:35:46

вместо 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%; 
}
The align-self свойство применяется к гибкий график работы пунктов. Кроме вашего li не является гибким элементом, потому что его родитель–ul – нет display: flex или display: inline-flex применить.

таким образом,ul - это не контейнер, то li это не гибкий элемент, а align-self не имеет никакого эффекта.

The align-items свойство похоже на align-self, за исключением того, что это относится к flex контейнеры.

С 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>
codepen демо

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

The 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 - это гибкий элемент.

Mohd Abdul Mujib · Accepted Answer · 2018-08-21 21:42:27

для будущих гуглеры,

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

Swapnil · Accepted Answer · 2018-02-14 11:27:49

* {
  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>

LcSalazar · Accepted Answer · 2014-08-14 18:21:55

вы можете изменить ul и li дисплеи table и table-cell. Тогда,vertical-align будет работать для вас:
ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}
http://codepen.io/anon/pen/pckvK