QbatyBlog

最近微博的工作开始多了起来，所以更新blog的速度慢了下来，最近干做关于围裙的项目，碰到有一个地方

上图的文字应该是居中的还是居左的？如果是居左的，假如文字只有1-3个岂不是很难看？

那么如何使的他自适应宽度然后又居中呢？光用CSS能做到吗？
答案是肯定的：

当然文字仍然是
这里无法避免的多套了一层div
结构是这样的

<li>
     <a href="#"><img src="../../images/common/pic/50.gif" title="" class="picborder_r"/></a>
     <div class="name"><a href="#">狼</a></div>
     <div class="gray">(2196人)</div>
</li>

 li{
        float:left;
        display:inline;
        width:56px;
        padding:3px 2px 5px 4px;
        margin:0 1px 0 2px;
        text-align:center;
        line-height:14px; 
}
.name{
        line-height:15px;
        padding:3px 3px 0; 
        display:inline-block; 
        text-align:left;
}
.name{
        *display:inline;
}
.name a{
        text-align:left;
}

我在li上加了text-aligin:center;
那么li内的行内元素肯定是居中的，现在就是如何让块级元素div有具有行内元素的属性呢？
display:inline-block;
这个能解决标准浏览器的问题，想FF
因为display:inline-block;在IE是不起作用的，所以现在必须让IE6，7支持这个属性
Google下能发现
要解决IE6下inline-block失效的办法，可以在定义元素

.name{display:inline-block}
.name{display:inline}

这样可以使得IE6，7起作用
而当块级元素具有行内元素的特征时，我们之需要在其父元素上定义text-align:center;在本元素上定义text-align:left;就能达到以上的效果了
plus:

另外发现inline-block这个属性对于而且只对于IE认为的原生行内元素能起作用的
也就是说,即便是把p或是div设置inline成行内了，inline-block在IE下对他仍然不起作用，因为他们是原生的块级元素
所以只需要把上面的div换成strong,span之类的，不用hack也能使得IE下没问题
但是如果需要使得原生块级元素对inline-block在IE下生效，只能用hack

怿飞的这篇文章详细的解释了inline-block
模拟兼容性的 inline-block 属性