我想使用flexbox垂直对齐一些内容在一个<li>，但没有很大的成功。
我在网上检查过，许多教程实际上使用了一个包装器div，它从父上的伸缩设置中获得align-items:center，但我想知道是否有可能删除这个额外的元素?
在这个例子中，我选择使用flexbox，因为列表项的高度将是一个动态%。
* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
当前回答
您可以将ul和li显示更改为table和table-cell。然后，垂直对齐将为您工作:
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
其他回答
.flex-container { display: flex; height: 300px; align-items: center; justify-content: center; width: 100%; } .flex-child { display: flex; width: 100%; background-color: khaki; border: 1px solid #000; align-items: center; justify-content: center; height: 100px; margin: 10px; padding: 10px; } <div class="container flex-container"> <div class="flex-child item-1">English</div> <div class="flex-child item-2"> English</div> <div class="flex-child item-3"> English</div> </div>
最好的做法是将一个flexbox嵌套在一个flexbox中。你所要做的就是给子元素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;
}
投票最多的答案是解决OP发布的这个特定问题，其中内容(文本)被包装在一个内联块元素中。有些情况下，可能是关于一个正常的元素在容器内垂直居中，这也适用于我的情况下，所以你所需要的是:
align-self: center;
* { 填充:0; 保证金:0; ｝ Html, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
这取决于你的身高，再叫一件事线高
* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:50 px;行高:50 px; ｝ < ul > <li>这是文本</li> < / ul >
