电话
13363039260
图文详解ul中li内容垂直居中和水平居中的方法
2024-01-17 13:30 小编
1、li内容垂直居中
flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下：
HTML部分：
<divclass="box">
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</div>
CSS部分：
<styletype="text/css">
.box{
width:300px;
height:300px;
border:1pxsolidred;
}
.boxul{
height:300px;
display:flex;
flex-direction:column;
justify-content:center;
}
.boxulli{
list-style:none;
margin:0auto;
}
</style>
猜你喜欢
联络方式：
13363039260
微信二维码 