我希望弹性项目占据全高,但其内部的内容将垂直居中。
justify-content: centre
不起作用,项目本身align-self: centre
会将其高度缩小为自己的内容,而我希望所有项目的高度相同。
在此示例中,我希望数字垂直居中: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>
答案 0 :(得分:11)
我能够通过以下方式完成数字的垂直居中:
.flex-item {
display:flex;
flex-direction:column;
justify-content:space-around;
}
如果您希望某些内容垂直居中,请将容器设置为display:flex
,然后使用justify-content
来完成它。使用justify-content
,您可以将其设置为space-around
或center
。要么完成你的目标。
答案 1 :(得分:6)
提供弹性项display: flex
和align-items: center
。弹性项目内容现在将垂直居中。
body {
display: flex;
height: 100vh;
margin: 0;
}
body > div {
flex: 1;
display: flex;
align-items: center;
background: #F00;
}
body > div:nth-child(odd) {
background: #F90;
}
<div>
<p>This</p>
</div>
<div>
<p>text</p>
</div>
<div>
<p>is</p>
</div>
<div>
<p>vertically</p>
</div>
<div>
<p>centered</p>
</div>