图文-水平垂直居中兼容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. ECSTORE 新建APP应用

    1.用命令新建app // ----- window平台 ----- 直接运行 " 站点根目录/app/base/cmd.bat " 出现命令行后输入 dev:new app my ...

  2. 工程和界面—Webstorm入门指南 Webstorm中的工程-备

    1.新建工程 “Quick Start”界面新建工程: 也可以点击顶部菜单栏“File”-> “New Project”. 弹出如下界面: “Location”指向想要创建的工程目录(如果该目录 ...

  3. Dr.Watson使用技巧摘要

    Dr.Watson使用技巧摘要 For Win98/WinME the executable is DRWATSON.EXEFor WinNT/Win2000/WinXP the executable ...

  4. 红帽（Red Hat Linux）下SVN服务器的安装与配置

    转:http://www.cnblogs.com/xd502djj/archive/2011/01/21/1941404.html 第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subve ...

  5. vsftpd允许root用户登录

    Linux下安装vsftpd之后,默认的配置是 匿名用户可以登录,匿名帐户有两个: 用户名:anonymous 密码:空 用户名:ftp 密码:ftp 如果要用匿名进行上传删除等操作需要配置其它参数. ...

  6. Linux下cut命令用法

    1 一两句话描述一下cut命令吧! 正如其名,cut的工作就是“剪”,具体的说就是在文件中负责剪切数据用的. cut是以每一行为一个处理对象的,这种机制和sed是一样的.(关于sed的入门文章将在近期 ...

  7. logstash ArgumentError: comparison of String with 5 failed

    <pre name="code" class="html"><pre name="code" class="ht ...

  8. BZOJ2084: [Poi2010]Antisymmetry

    2084: [Poi2010]Antisymmetry Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 187  Solved: 125[Submit] ...

  9. 【转】Ubuntu 修改hosts

    原文网址:http://l.14551.org/2009/12/2166 Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改 ...

  10. jtree（选择框）

    jtree一般的用法是: 1. 展示电脑中文件的层次结构,如图所示. 具体的代码: package jtree; import java.io.File; import javax.swing.JTr ...