Вместо использования 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
означает, что все элементы 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. Гибкие элементы
Каждый дочерний поток в гибком контейнере становится гибким элементом, и каждый непрерывный фрагмент текста, который непосредственно содержится внутри гибкого контейнера, оборачивается в анонимный гибкий элемент.
Следовательно, текст в li
является гибким элементом.
align-items: baseline
.Наиболее голосуемым ответом является решение этой конкретной проблемы, опубликованной OP, где содержимое (текст) было заключено в
inline-block
элемент. В некоторых случаях речь может идти о центрировании нормального элемента вертикально внутри контейнера , что также применимо в моем случае, поэтому для этого все, что вам нужно:источник
Лучший шаг - просто вставить flexbox внутрь flexbox . Все, что вам нужно сделать, это дать ребенку
align-items: center
. Это будет вертикально выравнивать текст внутри его родителя.источник
text-align:center
не работает в одиночку. Используйтеalign-items: center
с этим.РЕЗУЛЬТАТ
HTML
Используйте
align-items
вместоalign-self
и я также добавилflex-direction
кcolumn
.CSS
источник
источник
источник
С
display: flex
его помощью вы можете контролировать вертикальное выравнивание HTML-элементов.источник
Вы можете изменить
ul
иli
отображает наtable
иtable-cell
. Тогда,vertical-align
будет работать для вас:http://codepen.io/anon/pen/pckvK
источник