首页 » 技术新知 » 图片在DIV中垂直、水平居中

图片在DIV中垂直、水平居中

2008-08-12 10:33:331697 点击

将div的line-height设置与div高度一样,配合text-align:center,可实现在IE中内容垂直水平居中显示。示例如下:

CSS:

  1. <style type="text/css">  
  2. .ccdiv {    
  3.   floatleft;    
  4.   text-aligncenter;    
  5.   width200px;    
  6.   height200px;    
  7.   margin5px;    
  8.   border#ccc 1px solid;    
  9.   line-height200px;    
  10.   }  
  11. .ccdiv img {    
  12.   border:#666 1px dotted;  
  13.   }   
  14. </style> 

HTML:

  1. <div class="ccdiv">fufuok.com<img src="http://img.baidu.com/hi/logo-pb.gif" width="88" height="31" /></div> 
  2. <div class="ccdiv"><img src="http://www.google.cn/images/blogsearch-onebox.gif" width="35" height="35"/> </div> 

仅支持IE,图片在div中垂直水平居中的权宜之计,没有文字时需要在图片后面加个空格。

---div+css 水平居中 - div+css 垂直居中 - div中内容水平居中

更好的方法待续……

DIVCSSHTML水平居中垂直居中

相关文章

    暂时没有评论
该博停止更新,欢迎关注主域名博客:[品味经典] www.fufuok.com