html5 如何让li居中,如何让多个li标签居中

解决方法一：利用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，但这里我们必须用这个属性，不然解决不了。下面是一段代码：html>

#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;}

• 11111
• 22222
• 33333
• 44444

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

解决方法三：不推荐使用；

就是ul的设为text-align：center；

li的设为display：inline；

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