display:inline、block、line-block实现导航条自动居中

　　display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

 

　　inline-block的元素特点：

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

 

　　小案例1：

　　

　　

.pro_menu .pro_nav ul{width:230px;height:23px;margin:0 auto;text-align:center;}
.pro_menu .pro_nav ul li{display:inline;line-height:23px;font-size:16px;}

　　总结：这种方法好处在于li不管你是5个，4个，3个都能自动居中，扩展较好，这种只适用于文字，或加入些背景效果，但如果是换成图片就不适用了，因为上面提到display:inline是行内元素，宽度是不能设置，这时就要用，display:inline-block,请看案例2.

　　案例2：

　　

　　

#content #main-content .pro_menu .boxlist ul{width:550px;height: 96px;text-align: center;font-size:0;}
#content #main-content .pro_menu .boxlist ul li{position: relative;width:102px;display: inline-block;height:96px;line-height: 96px;background: url(../images/product_bg1.png) 3px 0 no-repeat;}
#content #main-content .pro_menu .boxlist ul li a img{margin-top: 10px;}
#content #main-content .pro_menu .pro_box a{position: absolute;display: block; width: 100%;height: 100%;background:url(../images/abackground.png);}