在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。
web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com1、li内容垂直居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:
HTML部分:
<div class="box">
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</div>
CSS部分:
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box ul{
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box ul li{
list-style: none;
margin: 0 auto;
}
</style>
效果图:
![19f482f15d0f282863c1be15f27d24a1.png](https://i-blog.csdnimg.cn/blog_migrate/eaa924e4e1bc4efb09e9eb90abf02ffb.jpeg)
2、li内容水平居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:
HTML部分:
<div class="box">
<ul>
<li>今天心情不错</li>
<li>今天心情不错</li>
<li>今天心情不错</li>
<li>今天心情不错</li>
</ul>
</div>
CSS部分:
<style type="text/css">
.box{
width: 100%;
height: 200px;
border: 1px solid #000;
}
.box ul{
height: 200px;
display: flex;
flex-direction: row;
justify-content: center;
}
.box ul li{
list-style: none;
height: 200px;
line-height: 200px;
}
</style>
效果图:
![689934441be6f4ca4d28ce2f0553cf4a.png](https://i-blog.csdnimg.cn/blog_migrate/ded1c7334101d3ddce43d7cb4017aee0.jpeg)
总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!
以上就是图文详解ul中li内容垂直居中和水平居中的方法的详细内容,更多请关注我哦!!!!!!