CSS导航菜单水平居中技巧揭秘

想要让CSS导航菜单水平居中，以吸引更多注意力？别急，这里为你详细解析几种实现方法。

方法一：display:inline-block

给外面的div添加text-align:center 然后将菜单容器设成display:inline-block行内块级元素，菜单浮左float:left。这种方法简单易用，兼容性较好。

css .navbar { text-align:center; }

.navbar ul { display:inline-block; }

.navbar li { float:left; }

.navbar li + li { margin-left:20px; }

方法二：position:relative

将定位div设为浮动， 再定位left:50%然后导航定位至left:-50%。这种方法代码精简，但浏览器兼容性较差，不支持IE7及以下版本。

css .navbar { display:table; margin:0 auto; }

.navbar li { display:table-cell; }

方法三：display:table

这种方法浏览器兼容性较低， 只支持Firefox或Chrome、Opera 12等较新的浏览器。

css .navbar ul { display:inline; zoom:1; }

将容器转成display:inline-block行内块级元素，然后直接用text-align:center使其达到水平居中效果。这种方法简单易用，兼容性较好。

方法五：width:fit-content / width:intrinsic

这种方法代码精简，但不支持IE7及以下版本。

css .navbar ul { width:fit-content; }