预览模式: 普通 | 列表

纯CSS解决DIV垂直居中的样式

作者:青锋幽灵 日期:2009-07-01 16:43

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. .a {width:200px;height:200px;border:1px solid #333;display:table;vertical-align:middle;}   
  8. .a p {position:relative;left:0;top:50%;width:100%;text-align:center;display:table-cell;vertical-align:middle;}   
  9. .a img {height:50px;border:1px solid #f30;position:relative;top:-50%;}   
  10. </style>  
  11. </head>  
  12. <div  
  13. <body>  
  14. <div class="a"><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  15. </body>  
  16. </html>  
标签: CSS 垂直居中
类别: 样式(DIV+CSS) | 引用: 0 | 评论: 0 | 阅读: 866 | 打印 | 打包
  • 1