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





posted @ 2016-12-02 09:33  webfby  阅读(274)  评论(0)  编辑  收藏  举报