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

http://runjs.cn/code/mfm8uzpm

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

null

时间： 2024-11-06 09:35:06

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

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

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 CSS* { margin:0; padding:0; list-style:none;} #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:r

移动端重构图片文字的水平垂直居中

移动端重构的时候,常见图文居中分两种,一种是这样图片跟文字呈上下结构的 这种比较简单,在这里就不详细说了. 今天群里有人问到了另外一种的,类似这样的,图片与文字呈左右结构的,并且图文水平垂直居中 大致意思就是,图片跟文字是左右结构,图片可以根据屏幕大小变化,右边文字有可能一行,有可能多行,都要求在那个方框里面垂直居中.并且图片跟文字整体在方框里面也是水平垂直居中的.甚至那个方框的高都不是固定的. 正好自己前些天也碰到这问题,当时赶项目做得有点粗糙,今天重新写写. 上次那项目做的- -要是万一文字

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

原文地址:http://www.ymblog.net/content_188.html 首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错.2.垂直居中,可以使用绝对定位,margin-left,margin-top负值在这里可以实现吗?答案是不可以,因为文字多少你不知道.那么绝对定位就不好使了.3.还有人应该想到line-height:;这种情况

未知高度定宽div水平居中及垂直居中（兼容ie6及其他牛逼浏览器）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1

《转》CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

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

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂直居中的处理上,所以接下来主要考虑垂直方向上的居中实现. 水平垂直居中主要包括三类:基本文本类,图像类,其他元素类 但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法. 方法一.使用 line-height 这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是

未知宽高的图片水平垂直居中的几种方法

最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用. 1. 背景法(兼容性好,简单,但不利于动态导入的图片) html: <div class="wrap"></div> css: .wrap{ width:300px; height:200px; background: url(../img/test.jpg) center center no-repeat; } 2. 图片外面用个p标签,

关于div的水平垂直居中

水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(position:absolute)+translate 4. flex布局(box-flex) 方法一 思路:显示设置父元素为table,子元素为cell-table,这样就可以使用vertical-align:center,实现水平居中. 优点:父元素(parent)可以动态的改变高度(table元素的特性)

CSS元素水平垂直居中方法总结（方法主要来自大漠以及张鑫旭博客）

以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g