Як вертикально вирівняти текст всередині флекси?

Я хотів би використовувати flexbox для вертикального вирівнювання деякого вмісту всередині, <li>але не маючи великого успіху.

Я перевірив в Інтернеті, і багато навчальних посібників насправді використовують обгортковий дів, який отримує align-items:centerз налаштувань flex на батьків, але мені цікаво, чи можна вирізати цей додатковий елемент?

Я вирішив використовувати flexbox в цьому випадку, оскільки висота елемента списку буде динамічною %.

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

Замість 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Властивість застосовується до нежестким деталей . За винятком того, що ваш 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означає, що всі гнучкі елементи будуть встановлені 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, загортається в анонімний елемент flex.

Отже, текст у тексті liє гнучким елементом.

Найбільш голосовою відповіддю є вирішення цієї конкретної проблеми, розміщеної ОП, де вміст (текст) був загорнутий всередині inline-blockелемента. Деякі випадки можуть стосуватися центрування нормального елемента вертикально всередині контейнера , який також застосовується в моєму випадку, тому для цього все, що вам потрібно, це:

align-self: center;

Найкращий хід - це просто вкласти гнучкий стік всередині флексбоксу . Все, що вам потрібно зробити - це дати дитині 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;
}

РЕЗУЛЬТАТ

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

Використовувати align-itemsзамість, align-selfі я також додав flex-directionдо column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

За допомогою display: flexви можете контролювати вертикальне вирівнювання елементів HTML.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Ви можете змінити 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