尤其是在制作导航时，float(浮动)自适应居中是经常运用得到，无论使用text-align:center（文本居中），还是使用vertical-align:middle（中线对齐）都不起任何作用，今天我在制作手机站导航时也遇到了这个问题，弄了半天才终于找到了办法。

1.两层结构不能指定外层标签宽度

两层结构是指一般导航的ul与li标签组合。

首先给全局一个text-align: center（文本居中）；

然后给ul一个display:inline-table/display:inline-block（显示内嵌表格/显示内嵌块）都可以。

最后就是定义li标签了，这里不是重点，重点就是前两点。

注意：这里的ul不能指定宽度，只能用自动或者无，否则浮动的li仍然不会居中，而ul只能随着li块的多少改变相应的宽度。

2.三层结构可以指定外层标签的宽度

三层结构是指在ul和li的外层多了一层标签，比如div。

同理首先给外层div一个text-align: center（文本居中）；

然后依然给ul一个display:inline-table/display:inline-block（显示内嵌表格/显示内嵌块）都可以。

最后就是定义li,(不重要)。

注意：这里我们可以对外层的div宽度进行定义，但仍然无法去定义ul的宽度，依旧只有不设或者设为自动。

从上面我们可以看出来，不管标签是两层结构还是三层结构，实际上仍然是三层结构，虽然第一种看上去是两层标签，实际上加上全局定义就可以算是三层，我们仍然可以给全局设计一个宽度，只是这样设置后会影响到整个网页的布局，所以第一种方法不推荐使用。要实现li标签的浮动居中，最关键点就是外面两层的text-align:center（文本居中）和display:inline-table/display:inline-block（显示内嵌表格/显示内嵌块），但是可以别把顺序给弄错，最外层为text-align:center（文本居中），第二层为display:inline-table/display:inline-block（显示内嵌表格/显示内嵌块）。

注意：在实现li浮动居中时，所部署的网页代码一定要符合html标准，否则在IE浏览器中会产生错误，无法正常居中。