css未知尺寸的图片的水平和垂直居中

wumei2009-10-29 14:41:30

纯CSS实现未知尺寸的图片水平和垂直居中。

.box {
       
/*非IE的主流浏览器识别的垂直居中的方法*/
        display
: table-cell;
        vertical
-align:middle;

       
/*设置水平居中*/
        text
-align:center;

       
/* 针对IE的Hack */
       
*display: block;
       
*font-size:262px;/*约为高度的0.873,300*0.873 约为262*/
       
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

        width
:400px;
        height
:300px;
        border
:1px solid #eee;
}
.box img {
       
/*设置图片垂直居中*/
        vertical
-align:middle;
}

<div class="box">
       
<img src="http://web.freeren.org/static/skins/08.03_orange/img/logo.gif"/>
</div>

 

上一篇:网站设计中css解决未知高度的div垂直居中
下一篇:在IE中使用高级CSS3选择器(一)

有什么想说的吗?