zoukankan      html  css  js  c++  java
  • 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容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; 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





  • 相关阅读:
    HTML的基础
    样式表
    页面布局
    for 循环
    函数
    数组
    样式属性
    css选择器参考手册
    样式表格及选择器
    表单
  • 原文地址:https://www.cnblogs.com/webfby/p/6efb300754fc99d9cbce88865f168819.html
Copyright © 2011-2022 走看看