为什么在我为 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如果设置高度，则需要将文本居中。
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;
display: flex;
align-items: center;
}<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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句