当前位置:首页 > 网页设计 >CSS >

大小不固定图片垂直居中全兼容写法

发布时间: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关于我们 - 网站声明 - 联系我们