HTML怎么让ul中的li水平垂直居中
本文小编为大家详细介绍“HTML怎么让ul中的li水平垂直居中”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML怎么让ul中的li水平垂直居中”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
网站制作、做网站服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。成都创新互联把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！
1、轮播图左右轮播，li水平排列：
- 1
- 2
- 3
- 4
.box{
width:100%;
height:200px;
border:1pxsolidred;
}
.boxul{
height:200px;
display:flex;
flex-direction:row;
justify-content:center;
}
.boxulli{
list-style:none;
height:200px;
line-height:200px;
}
效果：
垂直居中1.png
2、轮播图上下轮播，li垂直排列：
- 1
- 2
- 3
- 4
.box1{
width:100px;
height:300px;
border:1pxsolidred;
}
.box1ul{
height:300px;
display:flex;
flex-direction:column;
justify-content:center;
}
.box1ulli{
list-style:none;
margin:0auto;
}
读到这里，这篇“HTML怎么让ul中的li水平垂直居中”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
本文名称：HTML怎么让ul中的li水平垂直居中
新闻来源：http://6mz.cn/article/jioids.html