rinald_未来往事

ul菜单居中_水平居中css样式

WEB前端

ul li导航菜单居中/水平居中css样式。这个方法较简单,是将容器转成display:inline-block行内块级元素,然后就可以直接用text-align:center使其达到水平居中效果,也是推荐的方法。

示例ul导航菜单HTML代码:

  1. <div class="nav">
  2. <ul>
  3. <li><a href="/">首页</a></li>
  4. </ul>
  5. </div>

CSS样式代码:
给外面的div添加text-align:center,然后将菜单容器设成display:inline-block行内块级元素,菜单浮左float:left

  1. .nav {text-align:center;}
  2. .nav ul {display:inline-block;}
  3. .nav li {float:left;}
  4. .nav li + li {margin-left:20px;}

这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码

  1. *+html .nav ul {display:inline;zoom:1;}
原文作者:rinald
原文地址:http://fity.cn/post/585.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。