更多精彩
当前位置: 主页 > 小说 > 弹指江湖 >

图文详解ul中li内容垂直居中和水平居中的方法

时间:2019-05-15 06:34 来源:凤凰彩票团队 作者:采集侠 阅读:
这里是广告330x280
  

在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。

1、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>

效果图:

li居中3.jpg

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>

效果图:

li内容1.jpg

总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!

以上就是图文详解ul中li内容垂直居中和水平居中的方法的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

这里是广告580x90
点击分享:
给力是广告650x250
发表评论
用户名:(新注册) 密码: 匿名

栏目导航

这里是广告300x250

推荐阅读

这里是广告300x250

热门阅读

这里是广告300x250
808彩票网_808彩票网808cpcom论坛_七星彩808彩票软件【软件小说阅读网】