CSS让容器中的图片绝对居中(兼容FF+IE)的代码

做图片列表的时候,常常遇到这样的问题:图片的比例不同导致无法美观的对齐。如果在表格布局的时代,给表格加上垂直和水平居中就搞定了。但是CSS布局中,却不容易直接让图片垂直居中。

今天,小车就来分享下如何使FF和IE中某容器中的图片绝对居中,以方便我们做前文提到的不规则图片的列表。

我们以UL图片列表为例:

<ul>
<li>
<a class=”thumb” href=”/case/20110422293.html”><img src=”images/huxing.jpg” width=”120″ height=”40″ alt=”中国建筑”></div>
<p><a href=”/case/20110422293.html”>中国建筑</a></p>
</li>
… …
<li>
<a class=”thumb” href=”/case/20110422319.html”><img src=”images/huxing.jpg” width=”120″ height=”120″ alt=”中国石油”></div>
<p><a href=”/case/20110422319.html”>中国石油</a></p>
</li>
</ul>

给上边的html定义如下CSS

#case ul li a.thumb{
display:table-cell !important;
vertical-align:middle !important; /*设置水平居中*/
text-align:center; /* 针对IE的Hack */
display: block;
*font-size:126px; /*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:142px;
height:142px;
overflow:hidden;
}
#case ul li a img {
width:130px;
height:auto;
vertical-align:middle;
border:3px solid #999; /* 伪装阴影效果 */
border-left:none;
border-top:none;
}

刷新页面,效果实现了,如下为效果:

图片列表中图片的绝对居中

Published by 小车

网站技术工人