图文-水平垂直居中兼容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. HTML&CSS基础学习笔记1.21-语义化标签

    语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...

  2. C语言初学 判断闰年的问题

    #include<stdio.h> main( ) {  int   year , leap; scanf("%d",&year);             i ...

  3. canvas个人总结

    今天做了大量的canvas作业,发现很多的步奏都是一样的,我自己就封装了一个画直线形2D图形函数.功能不是很强大. function drawModule(Json,strokeStyle,fillS ...

  4. GO实例3 Slice append打印

    package main import "fmt" func main(){ ]int slice:=array[:] slice[]='a' slice[]='b' s1:=ap ...

  5. Oracle RAC 环境下的连接管理

    http://blog.csdn.net/cyxlxp8411/article/details/7634003

  6. startkde出现$DISPLAY is not set or cannot connect to the X server

    #startkde $DISPLAY is not set or cannot connect to the X server 解决: xinit /usr/bin/startkde --displa ...

  7. hdu2089：不要62（基础数位dp）

    题意:规定一个合法的号码不能含有4或者是连续的62 给定区间[n,m] 问此区间内合法的号码的个数 分析:数位dp dp[i][j]代表 最高位为 j 的 i 位数有多少个合法的 然后按题目规则进行转 ...

  8. poj3641：伪素数检测

    知道miller robin 素数测试中的伪素数定义就可以很容易解决,详见总结帖 #include <iostream> #include<stdio.h> #include& ...

  9. Java 四大域对象总结

    一.ServletContext 1.生命周期:当Web应用被加载进容器时创建代表整个web应用的ServletContext对象,当服务器关闭或Web应用被移除时,ServletContext对象跟 ...

  10. hdu 2817 A sequence of numbers(快速幂)

    Problem Description Xinlv wrote some sequences on the paper a long time ago, they might be arithmeti ...