需要兼容各种浏览器 .img_a{display:table-cell;vertical-align:middle;text-align:center;overflow:hidden;width:310px;height:310px;background:url(../images/stripe-5px.gif) repeat;} .img_a img{max-height:310px;max-width:310} 例子用到的img图片宽度为750px,高度为350px 但是IE8出来的效果如下(.img_a的div宽度被撑开了): 理想效果应该是如下:
方法二:1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。
3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果,图片水平,垂直均居中
搜索引擎蜘蛛爬取记录源码