CSSer课堂

我们是师徒六人组,以Design, CSS, JS, web标准化为爱好。


float后的水平居中菜单

常用的CSS控制的导航菜单中,使用频率最多的无序列表添加float:left来使得li位于一行。
然而,在li元素进行float:left操作后,菜单的水平居中就成为一个比较棘手的话题。以下文章中,

  • 使用position:relative
  • 结合CSS的left属性
  • 调整li元素的position:relative;让其归还right:50%

使用以上方案调整后,具有float:left的菜单就可以实现水平居中效果。

具体看float:left后的水平居中菜单实例:

提示:你可以先修改部分代码再运行。