图文-水平垂直居中兼容ie6+
具体代码：
  1.  <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <title>图文-水平垂直居中 兼容ie6+</title>
    7. 

  7.     <meta name="description" content="">
    8. 

  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
    9. 

  9.     <style>
    10. 

  10.         * { margin: 0; padding: 0; font-size: 12px; color: #FFF; }
    11. 

  11.         .container {
    12. 

  12.             display: table; /*主要代码*/
    13. 

  13.             *position: relative;  /*for ie67*/
    14. 

  14.             background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
    15. 

  15.         }
    16. 

  16.         .content {
    17. 

  17.             vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
    18. 

  18.             *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
    19. 

  19.         }
    20. 

  20.         .center {
    21. 

  21.             display: inline-block; /*主要代码*/
    22. 

  22.             *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
    23. 

  23.             padding: 10px; border: 1px solid #fff;
    24. 

  24.         }
    25. 

  25.     </style>
    26. 

  26. </head>
    27. 

  27. <body>
    28. 

  28. <div class="container">
    29. 

  29.     <div class="content">
    30. 

  30.         <div class="center">
    31. 

  31. 					<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="200" >
    32. 

  32.           <p>啦啦啦，啦啦啦，图文 水平垂直居中....</p> 
    33. 

  33.         </div>
    34. 

  34.     </div>
    35. 

  35. </div>
    36. 

  36. </body>
    37. 

  37. </html>


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


图文-水平垂直居中兼容ie6+的更多相关文章

  1. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  2. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  3. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 水平垂直居中图片及文字(兼容IE6+)实例

    直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  5. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  6. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  7. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Nginx的安装及反向代理设置

    因为项目的缘故,接触到了Nginx的安装和反向代理设置,和大家分享下. 一.Nginx的下载.安装cd /homewget http://nginx.org/download/nginx-1.0.5. ...

  2. dede分页

    {dede:list pagesize ='} <div class="intro clearfix"> <ul class="pic"> ...

  3. 关于Android的一些理解

    Activity中写回调函数 View的回调函数-------->事件回调 Activity层--------------->生命周期回调函数.事件回调函数 Window层 Layout是 ...

  4. [HEOI 2013 day2] SAO （树形动态规划）

    题目大意 给一棵N个节点的有向树(N <= 1000),求其拓扑序列个数. 思路 我们将任意一个点作为根,用dp[i][j]表示以节点i为根的子树满足节点i在第j个位置上的拓扑序列的个数.在求节 ...

  5. [iOS] Baritem 添加一项

    不是拖拽,而是在设计栏的属性设置里面.

  6. python glob标准库基础学习

    #glob文件名模式匹配#作用:使用unix shell规则查找与一个模式匹配文件名"""尽管glob api很小,但这个模块很强大,只要程序需要查找文件系统中名字与某种 ...

  7. 单片机脚本语言-移植lua到stm32-MDK

    Lua简单介绍 Lua[1]  是一个小巧的脚本语言.作者是巴西人.该语言的设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua脚本能够非常easy的被C/C++ 代码调用, ...

  8. 可失败构造器（Failable Initializers）

    Xcode6.1中Swift的最新版本是1.1,在该版本中引入了一个新的特性:可失败构造器.通过构造器初始化实际上是给class或struct的每一个存储属性(参数)提供初始值,进行对象实例化的过程. ...

  9. edmx文件

    MethodBase 提供有关方法的信息 在System.Reflector命名空间之下 edmx edmx:Runtime节点下包含与EF有关的定义与映射信息 edmx:ConceptualMode ...

  10. sqlserver插入datetime

    DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")