让图片居中和文字居中是不一样的，文字居中可以通过line-height等调整，让图片居中方法，参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素：after方法

一，display:table-cell

这个属性是让元素以表格单元格的形式呈现类似table标签中的td，其他现代浏览器和ie8+都是支持的 ie6/7是不支持的（当然下面也有解决方法）、

如果只看table元素 就两个特点：

1，同行等高

2，宽度自动调整

那么table-cell是不是也具有这个特点呢，答案是:yes;为什么呢？

css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，那么下面就是见证奇迹的时候，这个儿子生出了他的爸爸和爷爷（浏览器会自动创建者两个匿名盒对象）虽然你找不到你的father 和 grandfather，但这确实发生了。

看下下面两种情况 来了解下这个不可思议的事情，代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table-cell</title>

    <style>

        div{padding:10px 0;}

        .classtd,  td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;}

        .classtd{display:table-cell; border-color:#cc0;}

    </style>

</head>

<body>

    <div class="classtd">tom</div>

    <div class="classtd">jack</div>

    <div>普通 div</div>

    <div class="classtd">angel</div>  

    <div>======= 上面是div 下面是table ========</div>

    <table cellpadding="0" cellspacing="0">

        <tr>

            <td class="dtc">tom</td>

            <td class="dtc">jack</td>

        </tr>

    </table>

    <table style="margin-top:10px;" cellpadding="0" cellspacing="0">

        <tr>

            <td>angel</td>

        </tr>

    </table>

</body>

</html>

然后就可以下结论了：

tom 和 jack ，生出了父亲和爷爷（浏览器会创建一个表格来包裹相邻的display:table-cell元素），表现和第一个表格相同。angel自己生出了父亲和爷爷表现和第二个表格相同。

既然是这样，那么想了解table-cell，就是变相了解表格的td了。那就回到了前面所说的两个特点：同行等高，宽度自动调节。我们就可以拿这个货来作等高布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>img</title>

    <style>

        div{ width: 500px; height: 500px; background: #eee; text-align: center; display: table-cell; vertical-align: middle;}

        div img{ vertical-align: middle;}

    </style>

</head>

<body>

    <div class="im-box">

        <img src="data:images/05.jpg">

    </div>

</body>

</html>

很好 元素img居中显示了，但在ie7中的显示却是这样的 ，上面也提到了table-cell在ie6/7不支持

　

如何解决让ie6/7也支持table-cell，我的解决方法是让其布局结构多加个盒子用相对绝对定位使其居中，当然或许还有更好的方法，但我目前还不知道，这样多加个div用*hack写的样式在其他现代浏览器里也不影响，可以统一使用这样的布局样式，代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>img</title>

    <style>

        div.im-box{ width: 500px; height: 500px; background: #eee; text-align: center; display: table-cell; vertical-align: middle; *position: relative;}

        div.im-cont{ *position: absolute; *top: 50%}

        div.im-cont img{ vertical-align: middle; display: inline; *position: relative; *top: -50%; *left: -50%;}

    </style>

</head>

<body>

    <div class="im-box">

        <div class="im-cont">

            <img src="data:images/05.jpg">

        </div>

    </div>

</body>

</html>

显示如：

这样就可以让在ie7中居中显示。

二，伪元素：after

伪元素after/before+content我们知道可以给元素生成内容，content属性在css2就已被引入被大多浏览器支持 (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)ie8以下还是不支持。其生成内容就不说了，看下伪元素的其他实用的用法。

1，:after+content清楚浮动

我们知道盒子中如果元素浮动，那么盒子就会高度塌陷 如

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素</title>

    <style>

    div{ padding: 10px; background: yellow;}

    div img{ float: left;}

    </style>

</head>

<body>

    <div class="im-box">

        <img src="data:images/05.jpg" alt="">

    </div>

</body>

</html>

通常 我们解决这样的方法有overflow:hidden/auto；添加空div并clear:both;给子元素设置高度等 现在我们用：after来解决浮动问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素</title>

    <style>

    div{ padding: 10px; background: yellow; *zoom:1;}

    div:after{display:block; content:"clear"; height:0; clear:both; overflow: hidden; visibility:hidden;}

    div img{ float: left;}

    </style>

</head>

<body>

    <div class="im-box">

        <img src="data:images/05.jpg" alt="">

    </div>

</body>

</html>

需要解释的是伪元素在ie8下不支持 所以我们用ie的私有缩放属性*zoom来解决浮动的破坏 在ie7下展示如下

很好，用：after+zoo来解决浮动带来的破坏 比其他方法最实用，且不产生多余标签；

2，:after+content让大小不固定图片居中

上面介绍了用table-cell让其剧中的方法，来看下伪元素使其居中怎么做到

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>img</title>

    <style>

        div.im-box{ width: 500px; height: 500px; background: #eee; text-align: center; font-size:0; *font-size:200px;}

        div.im-box:after{ display: inline-block; width: 0; height: 100%; content: 'center'; vertical-align: middle; overflow: hidden;}

        div img{ vertical-align: middle; }

    </style>

</head>

<body>

    <div class="im-box">

    　　<img src="data:images/05.jpg">

    </div>

</body>

</html>

与清除浮动影响类似，IE6/7不支持:after伪类，我们可以用另外的方法让图片垂直居中，例如font-size方法，设一个比较大点的字体大小，IE6/7就可以实现图片垂直对齐了，至于其他浏览器，就用:after伪类+content内容生成一个vertical-align:middle属性的元素就可以了。

diplay:table-cell和伪元素：after方法让图片居中的更多相关文章

  1. 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

    在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...

  2. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  3. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  4. css伪元素选择器（伪对象选择器）checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

  5. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  6. jquery选择伪元素属性的方法

    CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...

  7. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  8. 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。

    回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...

  9. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

随机推荐

  1. 服务器运行环境部署（PHP）

    1.使用的是腾讯云服务器,系统为centOS: 2.LAMP环境配置查看:https://cloud.tencent.com/document/product/213/8043: 3.mysql-se ...

  2. 引水入城[NOI2010 ]

    题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N行M列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个海拔高度. 为了 ...

  3. kickstart自动化安装--tftp+nfs+dhcp

    使用kickstart实现Centos 自动化安装 Kickstart自动化安装简介: 规模化:同时装配多台 服务器 自动化 :安装系统,配置各种服务 远程实现:不需要光盘,U盘等安装介质 优势: ( ...

  4. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

  5. VS2010 常见错误类型汇总

    开发路漫漫,尤其对于刚从事开发不久的新手来说,常常遇到一些稀奇古怪的错误,很是头疼,鉴于自己在开发过程中常遇到的几个错误做个分享,希望对大家有所帮助: 错误1: 在创建完win32的DLL后,编译时出 ...

  6. POJ-3522 Slim Span（最小生成树）

    Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 8633   Accepted: 4608 Descrip ...

  7. /etc/shadow，/etc/passwd，/etc/shadow，/etc/passwd文件的内容解释

    1.1 /etc/passwd文件内容格式           该目录存储的是操作系统用户信息,该文件为所有用户可见 用户名: 密码 : uid  : gid :用户描述:主目录:登陆shell 举个 ...

  8. PXE+kickstart无人值守安装CentOS 6

    本文目录: 1.1 PXE说明 1.2 PXE流程 1.3 部署环境说明 1.4 部署DHCP 1.5 部署TFTP 1.6 提供pxe的bootloader和相关配置文件 1.7 利用原版安装镜像获 ...

  9. 友盟崩溃日志分析工具 - dSYMTools

    公司的项目中集成了UM的统计功能,UM统计可以统计app的用户新增,版本分布,日志崩溃等信息,打开错误分析按钮,则可能会看到很多崩溃的日志信息 选择编辑可以选择更多的版本号 点击列表中的一个崩溃日志, ...

  10. Maven详解（三）------ Maven工程目录介绍

    上一章我们配置并安装好了 Maven,那么这一章我们介绍如何用eclipse创建一个 Maven 工程,然后介绍 Maven 工程的目录结构. 1.eclipse 创建 Maven 工程 第一步:Fi ...