li水平居中css实现

淡水河边的博客 2010-08-06 00:13:00 累计浏览 4,028 次

本机暂存

内容概览

这篇讲的是如何用 CSS 让 li 元素在容器内水平居中，特别是像页脚导航这类场景。作者从常见的菜单实现出发，指出大家通常用 float: left 让 li 横向排列，但随后会面临如何让它们整体居中的问题。这确实是个典型的布局小坑。

文章的核心在于对比两种实现思路。一种是延续 float: left，但需要额外处理居中，相对繁琐。作者给出的更简洁的方案是改用 display: inline 或 inline-block。这么一来，li 元素会像文字段落中的文字一样自然排列到一行，并且默认就能继承父容器的 text-align: center 属性，轻松实现水平居中，完全省去了 float 以及相应的清除浮动操作。

这个对比清晰地说明了不同显示属性带来的布局行为差异：float 适合需要紧密控制元素环绕的布局，而 inline 则非常适合让块级元素模拟文本流以实现居中或简单排列。掌握这种显示方法的选择逻辑，能帮我们在日常开发中更高效地处理这类常见的界面细节。

现在一般都是用li做菜单了，淡水也就从了。li的float:left,可以了变成横向的菜单了。但是它们怎么跑到区域里居中显示呢（一般是页脚的链接是居中的）？li的display:inline;就可以了，float：left都不要了，自己跑一行去了。

#main_footer{
list-style:none;
text-align:center;
}
#main_footer li{
display:inline;
}

<ul id=”main_footer”>
<li><a href=”#”>公司介绍</a></li>
<li><a href=”#”>我们的创新</a></li>
<li><a href=”#”>工作理念</a></li>
<li><a href=”#”>价值观</a></li>
<li><a href=”#”>联系我们</a></li>
</ul>

其实淡水还是在用table布局，为啥，方便啊。不过也少了:)

哎，div啊。。。

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

50个活力和动感的网页设计－颜色的灵感（累计阅读 34,442）
视觉设计前瞻实用性研究（PNVD）第二期（累计阅读 12,977）
各公司对前端开发的职位描述（累计阅读 10,405）
iframe大小自适应（累计阅读 10,057）
浏览器的渲染原理简介（累计阅读 8,377）
解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
程序员眼里IE浏览器是什么样的（累计阅读 8,011）
2010网页设计趋势（累计阅读 7,818）
Web前端工程师编程能力飞升之路（累计阅读 7,692）
颜色的代码表达式（累计阅读 7,665）