如何在flexbox中垂直对齐文本？
如何在flexbox中垂直对齐文本？
提问于 2014-08-14 23:11:25
我想使用flexbox在<li>中垂直对齐一些内容，但效果不是很好。
我在网上查过了，许多教程实际上使用了一个包装器div，它从父组件的flex设置中获取align-items:center，但我想知道是否有可能去掉这个额外的元素？
在这种情况下，我选择使用flexbox，因为列表项高度将是一个动态%。
* {
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%;
}<ul>
<li>This is the text</li>
</ul>
回答 7
Stack Overflow用户
发布于 2020-09-04 11:59:16
将li中的显示设置为flex，并将align-items设置为center。
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}我个人也会针对伪元素并使用border-box (Universal selector * and pseudo elements)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}Stack Overflow用户
发布于 2020-05-03 19:13:46
使用display: flex可以控制HTML元素的垂直对齐方式。
.box {
height: 100px;
display: flex;
align-items: center; /* Vertical */
justify-content: center; /* Horizontal */
border:2px solid black;
}
.box div {
width: 100px;
height: 20px;
border:1px solid;
}<div class="box">
<div>Hello</div>
<p>World</p>
</div>
Stack Overflow用户
发布于 2020-07-04 02:22:03
这取决于你的li的高度，再说一句就行高
* {
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:50px;line-height:50px;
}<ul>
<li>This is the text</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25311541
复制相关文章
相似问题