我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.
我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素?
我选择在此实例中使用弹性框,因为列表项高度将是动态%.
* {
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%;
}Run Code Online (Sandbox Code Playgroud)
<ul>
<li>This is the text</li>
</ul>Run Code Online (Sandbox Code Playgroud)