中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

css实现div内图片的垂直、水平居中 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > 网页设计 > Html+Css > css实现div内图片的垂直、水平居中

css实现div内图片的垂直、水平居中

2011-05-10    文章来源:互联网    浏览次数:
纯css完美地解决图片在div内垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari...... 强烈推荐!
 
css实现div内图片的垂直、水平居中
css实现div内图片的垂直、水平居中
 
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4. <title></title> 
  5. <style type="text/css"> 
  6. .img_v {  
  7.  display:table-cell !important;  
  8.  display:block;  
  9.  position:static !important;  
  10.  position:relative;  
  11.  overflow:hidden;  
  12.  width:400px;  
  13.  height:400px;  
  14.  border:1px solid #000;  
  15.  vertical-align:middle;  
  16.  text-align:center;  
  17. }  
  18.  
  19. .img_v p {  
  20.  display:table-cell !important;  
  21.  display:block;  
  22.  margin:0;  
  23.  position:static !important;  
  24.  position:absolute;  
  25.  top:50%;  
  26.  left:50%;  
  27.  width:400px;  
  28.  margin-left:auto;  
  29.  margin-right:auto;  
  30. }  
  31.  
  32. .img_v img {  
  33.  position:static !important;  
  34.  position:relative;  
  35.  top:auto !important;  
  36.  top:-50%;  
  37.  left:auto !important;  
  38.  left:-50%;  
  39. }  
  40. </style> 
  41.  
  42. </head> 
  43.  
  44. <body> 
  45. <div class="img_v"> 
  46.   <p><img src="http://www.okajax.com/images/logo.gif"></p> 
  47. </div> 
  48.  
  49. </body> 
  50.  
  51. </html> 

 

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部