我有这个codepen https://codepen.io/luisguerra/pen/prROqY ,我试图将每个元素中的文本垂直居中。
我想要的原因是我不知道列表中会有多少元素,我希望它们以相同的高度分布并且每个垂直居中(所有元素应该只有 1 行)但是 line-height : 100% 行不通,想法?
.site-content {
height: 400px;
}
.menu {
height: 100%;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.item {
flex: 1;
}
<div class="site-content">
<div class="menu">
<div class="item">Lorem ipsum</div>
<div class="item">Lorem ipsum</div>
<div class="item">Lorem ipsum</div>
</div>
</div>
最佳答案
justify-content: center
到 .menu
会帮助你,因为你的 flex-direction
是 column
.
关于html - 在 flex 容器元素上垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45541372/