你的位置: Kiyo'Space首页 HTML/CSS/特效 阅读文章 欢迎留下您的足迹

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

[ HTML/CSS/特效 ] 分享

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

我就将我用到的一段图片居中的代码分享给大家。希望对大家有用
 
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层不能是浮动的。不然达不到效果的。

 

没有评论

  • (Required)
  • (Required, will not be published)