如何让多个li标签居中

发布时间:2017-04-05

解决方法一:利用margin-left设置;

比如 侧边栏的div宽300px;我有四个li,每个设置height:30px;width:60px;并让这四个li位于侧边栏的头部;就可以设置ul的margin-left:80px;

这样就会使四个li居于中间;如果想使四个li之间有间隔。可以设置li的margin-left:5px;这样就需要改变先前ul的margin-left为(300-240-20)/2-2.5,因为margin-left是透明的,所以才会有上面这个计算式子。可见可能会出现小数,这样是我们要避免的。利用ul的margin-left很简单地设置居中,只是不是强迫症患者的首选。因为这个方法,大家应该都会,而且百度一下,都会出来这样的例子,在此不贴代码。

在这个方法中,我们可以设置ul的高和宽,但只要不让ul的宽超过div的宽,以及不让ul的宽低于四个li的和的宽,就不会出现排版错误。

本人也不喜欢这个方法,于是,就有了第二种方法。

解决方法二:利用ul的text-align:center属性;

对于第二种方法,首先要说的是,设置ul的display:table,text-align:center。是不是觉得好神奇,怎么会出现display:table,说实话,这也是我第一次用到这个属性,虽然知道有这个属性,但一般还真不用,我们似乎只用none,inline和block,但这里我们必须用这个属性,不然解决不了。下面是一段代码:

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:500px;height:500px;background-color: red;}
#ul1{display: table;margin:0 auto;height:40px;text-align: center;padding:0;}
.li1{float: left;margin-left: 5px;padding:0;width:70px;height:60px;line-height: 60px;font-size: 20px;background-color: yellow;list-style-type: none;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</div>
</body>
</html>

这段代码可以解决居中方法,注意:ul设为display:table;text-align:center;但记住千万千万不可以设置ul的宽,不然无法实现。

解决方法三:不推荐使用;

就是ul的设为text-align:center;

li的设为display:inline;

但这样的话,就无法做出li的宽和高,虽然也会居中,但已经失去了其解决的意义。