ul 标签 li 居中显示

<style>
ul.abput_content1{width:500px; text-align:center;}
ul li{dispay:inline-block;}
<style>
ie6,ie7 不支持inline-block;  可以用inline代替（ie6,ie7垂直高度和padding(无效)了。）
<ul class="abput_content1">
		<li ><a href="">公司简介</a></li>
		<li ><a href="">企业文化</a></li>
		<li><a href="">荣誉资质</a></li>
	</ul>

一、inline元素都在一行内显示，直到该行排满， 对inline元素设置width,height属性无效 。

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

浏览器兼容

编辑

在css中，inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。display:inline-block旁边的内联对象会被呈递在同一行内，允许空格。 但是这个属性目前不是所有的浏览器都支持 ， 只有Opera和Safar，FireFox3和IE8支持 ，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下

在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：

1、display:-moz-inline-stack

“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative来hack掉这个bug”

2、display:-moz-inline-box

使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决

所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack

在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：

1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：

div {display:inline-block;}

div {display:inline;}

2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：

div {display:inline; zoom:1;}

那么为了能够让所有 浏览器支持display:inline-block，综合一下，最终的实现代码如下：

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */

zoom:1; /*同样是IE 下触发 hasLayout*/

*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

/*扩展一下一些其他可能用到的属性*/

text-indent:-9999px;

* text-indent:0;

font-size:0;

line-height:0; /* 如需 隐藏文字，可用这四个属性 */

/*另外上面 隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */

overflow:hidden; /* 隐藏溢出的内容 */

vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */

width:？px; /*？为任意非auto值*/

height:？px; /*？为任意非auto值*/