图文-水平垂直居中兼容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. 文件操作IO流

    fopen 打开文件或者生成文件 getc 向文件中读取一个字符 putc 向文件中写入一个字符 fgets 向文件中读取字符串 参数可以设置获取多少个字符串 fputs 向文件中写入字符串 不自动添 ...

  2. Servlet 中的out.print()与out.writer()的区别

    PrintWriter out = response.getWriter(); out.print(obj)其源码如下: public void print(Object obj) { write(S ...

  3. MySQL扩展

    一.使用MySQL特有的函数!        1>到年底还有几天            select datediff('2014-12-31','2014-6-21');//此函数用于计算日期 ...

  4. 智能卡 APTU命令

    一条命令APDU含有一个头标和一个本体.本体可有不同长度,或者在相关数据字段为空时,整个可以不存 在. 头标由四个数据元组成,它们是类CLA(ClAss)字节,命令INS(INStructic,n)字 ...

  5. windows下重命名一个带有前缀"."dot字符的名字的错误问题

    如果用正常的右键重命名那么肯定会报错的,比如: 有一个名为project的文件,我想把它命名为.project,加了个前缀dot.然后window就报错了,弹出个对话框让“你必须输入一个文件名”.它可 ...

  6. Flash AIR 保存与读取

    package { import flash.display.Sprite; import flash.net.URLLoader; import flash.display.Loader; impo ...

  7. 利用Connect By构造数列

    ,) yymm ;

  8. IT人大学生活之“做点正经事”

    最近一直主抓部门的人事招聘工作:很多到手的简历,特别是毕业一年之内的同学的简历上面都会写到:在xxx餐饮公司实习,获得了与人交流的经验:在学生会组织了哪些文体活动:在大四参加了一些与软件开发不相关的一 ...

  9. 瑞柏匡丞谈中国移动app的国际进阶路

    当今3.0互联时代,已然形成了一个移动化,互动化,全球化的完整体系.瑞柏匡丞也在常年与国内外客户的交流沟通中有了自己的些许见解. 国内的移动产业的发展已然非常迅速,但也正是因为各类企业的不断崛起,能够 ...

  10. 贪心-hdu-1789-Doing Homework again

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1789 题目意思: 有n个作业,每个作业有一个截止日期,每个作业如果超过截止日期完成的时候有一个惩罚值 ...