图片垂直居中的CSS技巧
今天遇到的问题:使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中。
主要在于:图片未知大小,而且要求垂直居中。
下面是找的一个权衡的相对结构干净,CSS简单的解决方法:
.box {
width:275px;
height:275px;
border:1px solid #ccc;
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 240px;/*约为高度的0.873,275*0.873 约为240*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
}
.box img {
vertical-align:middle;/*设置图片垂直居中*/
}
width:275px;
height:275px;
border:1px solid #ccc;
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 240px;/*约为高度的0.873,275*0.873 约为240*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
}
.box img {
vertical-align:middle;/*设置图片垂直居中*/
}
HTML:
<div class="box">
<img src="http://www.homeun.com/UserDocument/YOYO/Picture/2008061920024038399.bmp" />
</div>
<img src="http://www.homeun.com/UserDocument/YOYO/Picture/2008061920024038399.bmp" />
</div>