码迷,mamicode.com
首页 > 其他好文 > 详细

图文-水平垂直居中兼容ie6+

时间:2016-12-02 09:48:35      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:span   http   垂直   ack   device   abs   port   esc   des   

图文-水平垂直居中兼容ie6+
具体代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>图文-水平垂直居中 兼容ie6+</title>
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <style>
  10. * { margin: 0; padding: 0; font-size: 12px; color: #FFF; }
  11. .container {
  12. display: table; /*主要代码*/
  13. *position: relative; /*for ie67*/
  14. background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
  15. }
  16. .content {
  17. vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
  18. *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
  19. }
  20. .center {
  21. display: inline-block; /*主要代码*/
  22. *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
  23. padding: 10px; border: 1px solid #fff;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29. <div class="content">
  30. <div class="center">
  31. <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="200" >
  32. <p>啦啦啦,啦啦啦,图文 水平垂直居中....</p>
  33. </div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>


在线效果预览:http://runjs.cn/detail/mfm8uzpm





图文-水平垂直居中兼容ie6+

标签:span   http   垂直   ack   device   abs   port   esc   des   

原文地址:http://www.cnblogs.com/webfby/p/6efb300754fc99d9cbce88865f168819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!