diplay:table-cell和伪元素:after方法让图片居中

让图片居中和文字居中是不一样的,文字居中可以通过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="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="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="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="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="images/05.jpg">
    </div>
</body>
</html>

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

 

posted @ 2015-10-06 17:15  自_定义  阅读(2871)  评论(0编辑  收藏  举报