在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。
1、li内容垂直居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:
HTML部分:
- aa
- bb
- cc
- dd
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;
}
效果图:
2、li内容水平居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:
HTML部分:
- 今天心情不错
- 今天心情不错
- 今天心情不错
- 今天心情不错
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;
}
效果图:
总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!