css怎么让ul中li水平垂直居中
发布时间:2020-09-14 13:45:59
来源:亿速云
阅读:228
作者:小新
css怎么让ul中li水平垂直居中?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
我们在写轮播图时,底部的小圆点或数字会放在一个ul下li里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的li在ul中水平垂直居中。
轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。
1、轮播图左右轮播,li水平排列:
- 1
- 2
- 3
- 4
.box{
width: 100%;
height: 200px;
border: 1px solid red;
}
.box ul{
height: 200px;
display: flex;
flex-direction: row;
justify-content: center;
}
.box ul li{
list-style: none;
height: 200px;
line-height: 200px;
}
效果:
2、轮播图上下轮播,li垂直排列:
- 1
- 2
- 3
- 4
.box1{
width: 100px;
height: 300px;
border: 1px solid red;
}
.box1 ul{
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box1 ul li{
list-style: none;
margin: 0 auto;
}
效果:
感谢各位的阅读!看完上述内容,你们对css怎么让ul中li水平垂直居中大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。