经常遇到的图片居中问题实现方法

Kiyo • • HTML/CSS/特效 • 39 阅读

看到很多人都在问图片的居中怎么实现，实现他其实不难。要难就难在它要兼容好几种不同的浏览器

我就将我用到的一段图片居中的代码分享给大家。希望对大家有用
 
html代码:
 
<div class="pic">
  <span><a><img /><a></sapn>
</div>
 
css代码：
 .pic{overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle; float:none;}
 .pic span{position:static;+position:absolute;top:50%; margin:0pt;}
 .pic img{position:static;+position:relative;top:-50%;left:-50%; display :inline;}
 
需要注意的是.pic所在在div层不能是浮动的。不然达不到效果的。

 

版权声明：
作者：Kiyo
链接：https://www.wkiyo.cn/html/2009-03/i587.html
来源：Kiyo's space
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>