« Windows2003序列号Microsoft VS 2008 过期解决方法 »

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

分类: 网页设计代码 发布: roger 浏览: 日期: 2012年6月19日

纯css完美地解决图片在div内垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari...... 强烈推荐！ 

  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.xmhjfb.com/images/logo.gif"></p> 
  47. </div> 
  48.  
  49. </body> 
  50.  
  51. </html> 

 

相关文章:

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Walle Build 91204

Copyright 2008-2022 WWW.XMHJFB.COM Rights Reserved 闽ICP备16020319号