作者：suibian | 来源：互联网 | 2023-05-28 18:48
我希望flex项目占据全高,但是它们内部的内容是垂直居中的.
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;
}
- 1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk
- 2
- 3
- 4
- 5
- 6
1> paceaux..：
我能够通过以下方式完成数字的垂直居中:
.flex-item {
display:flex;
flex-direction:column;
justify-content:space-around;
}
如果您希望某些内容垂直居中,请将容器设置为display:flex,然后使用justify-content它来完成它.随着justify-content你既可以将其设置为space-around或center.要么完成你的目标.
http://codepen.io/anon/pen/RNoajg
2> misterManSam..：
给出flex项目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;
}
京公网安备 11010802041100号