发布时间:2016-02-29 17:47:59 作者:佚名 阅读:(516)
思路: chrome/firfox/ie8+ 使用:after伪类+display:inline-block;让大小不固定图片垂直居中
ie7/ie6 使用父元素设置font-size: value; /* value值约为高度的0.873,淘宝前端使用的font-size方法*/
<style type="text/css"> *{margin:0;padding:0;} .box{width:500px; height:500px; text-align:center;*font-size:437px; border:1px red solid;} .box img{ vertical-align:middle;} .box:after{content:'...';width:0; height:100%; display:inline-block; vertical-align:middle; overflow:hidden;} </style> <div class="box"> <img src="http://1.gravatar.com/avatar/b6a54de62d03acc26d2d0633646e289f?s=48&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" /> </div>
大小不固定图片垂直居中全兼容
欢迎分享转载→ 大小不固定图片垂直居中全兼容写法
© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们