在Flexbox项目中垂直居中文本 [英] Vertically centering text inside flexbox item
问题描述
$ b
justify-content:center
我想要flex项目全高, / code>不起作用,而物品本身的 align-self:center
缩小到它自己的内容,而我希望所有物品都是相同的高度。
在这个例子中,我想要数字垂直居中: http://codepen.io/ilyador/pen/ogYbWO?editors=110
.flex-container {padding:0;保证金:0; list-style:none;显示:flex; } .flex-item {flex:1 1;背景:番茄;填充:5px; margin-top:10px;白颜色; font-weight:bold; font-size:3em; text-align:center; border:solid 1px red;}
< ul class = 柔性容器> < li class =flex-item> 1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk< / li> < li class =flex-item> 2< / li> < li class =flex-item> 3< / li> < li class =flex-item> 4< / li> < li class =flex-item> 5< / li> < li class =flex-item> 6< / li>< / ul>
$ b
我可以用这个来完成数字的垂直居中:
$ pre> .flex-item {
display:flex;
flex-direction:column;
justify-content:space-around;
$ b如果你想要一些垂直居中的东西,把容器设置为 display:flex
,然后使用 justify-content
来完成它。使用 justify-content
,您可以将它设置为 space-around
或
http://codepen.io/anon/pen/RNoajg
I want the flex items to take full height, but the content inside them to be vertically centred.
justify-content: centre
doesn't work, and align-self: centre
on the item itself shrinks its height to its own content, while I want all items to be the same height.
In this example I want the numbers to be vertically centred: http://codepen.io/ilyador/pen/ogYbWO?editors=110
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-item {
flex: 1 1;
background: tomato;
padding: 5px;
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: solid 1px red;
}
<ul class="flex-container">
<li class="flex-item">1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk </li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
I was able to accomplish vertical centering of your numbers with this:
.flex-item {
display:flex;
flex-direction:column;
justify-content:space-around;
}
If you want something to be vertically centered, set the container to display:flex
and then use justify-content
to accomplish it. With justify-content
you could either set it to space-around
or to center
. Either will accomplish your goal.
http://codepen.io/anon/pen/RNoajg
这篇关于在Flexbox项目中垂直居中文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!