CSS让ul所有的li居中显示的方法

 CSS ul li居中本来以为很容易就实现了，因为平时都是让li float:left，这样后面的可以排成一行，对居中没做要求，不过最近搞个项目，必须让ui的每个li都居中显示，这可让我难为了，没想到一时把我难坏了，不过还是被我解决了。下面说下方法：

我的方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将这个属性改为inline就可以让ul li居中，简单吧！下面来段代码实例：

view source

print ?

01	<style type="text/css">

02

#bNav{

03	margin-top:10px;

04	background:#D9EBF5;

05	text-align:center;

06

}

07

#bNav ul{

08	padding:4px 0;

09

margin:0;

10	overflow:hidden;

11

}

12	#bNav ul li{

13	display:inline;

14	padding:0;

15

}

16

</style>

17	<div id="bNav" class="bNav">

18

<ul>

19	<li><a href="#" title="Home">公司主页</a></li>

20	<li>|</li>

21	<li><a href="#" title="About Us">About Us</a></li>

22	<li>|</li>

23	<li><a href="#" title="形象设计">形象设计</a></li>

24	<li>|</li>

25	<li><a href="#" title="艺术天地">艺术天地</a></li>

26	<li>|</li>

27	<li><a href="#" title="Contact Us">Contact Us</a></li>

28	<li>|</li>

29	<li><a href="#" title="应用开发">应用开发</a></li>

30	<li>|</li>

31	<li><a href="#" title="工作服务">工作服务</a></li>

32	<li>|</li>

33	<li><a href="#" title="申请链接">申请链接</a></li>

34

</ul>

35

</div>

呵呵，由此你可以做成一款菜单了。

天骄国际
随心所欲
趴趴走