为什么一旦我给flex容器设置了高度,文本就不再垂直居中了?我该如何解决这个问题?
ul {
display: flex;
list-style: none;
background: green;
width: 400px;
align-items: center;
}
ul li {
flex: 50%;
}
ul.fail {
background: red;
}
ul.fail li {
height: 100px;
}
<ul>
<li>I am some text</li>
<li>I am some more text I am some more text I am some more text</li>
</ul>
<ul class="fail">
<li>I am some text</li>
<li>I am some more text I am some more text I am some more text</li>
</ul>
li
仍然位于中心,如果你给li
元素着色,就可以看到它。在提及高度之前,li
元素采用其内容的高度,因此内容(实际上是 flex 元素的子元素的子元素)位于中心。因此,你可以将 flex 应用于li
元素,或者删除高度。 - Mr_Green