`
un268un
  • 浏览: 11336 次
社区版块
存档分类
最新评论

纯css实现未知大小的图片水平垂直居中的方法

阅读更多

  方法一: .box { 
  /*非IE的主流浏览器识别的垂直居中的方法*/ 
  display: table-cell;
  vertical-align:middle; 
  /*设置水平居中*/ 
  text-align:center; 
  /* 针对IE的Hack */ 
  *display: block; 
  *font-size: 262px;/*约为高度的0.873,300*0.873 约为262*/ 
  *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
  width:750px; 
  height:300px; 
  border: 1px solid #777; 
  } 
  .box img { 
  /*设置图片垂直居中*/ 
  vertical-align:middle; 
  } 
   
  Skin/red2009/images/logo. gif" /> 
  
  方法二:   
    
    
    
  未知大小的图片水平垂直居中-  
    
  /* for non-IE browsers */  
  div.holder {width:750px; height:300px; background:#f8f8f8; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}  
    
    
    
  /* vertical align for IE */  
  #edge {width:0;background:red; height:100%; display:inline-block; vertical-align:middle;}   
  #container {text-align:center; width:100%;font-size:0;display:inline-block; vertical-align:middle;}  
    
    
    
    
  Skin/red2009/images/logo. gif" alt="" />  
    
   
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics