图片垂直居中(兼容IE6/7)

江山如婳 2018-03-09

css 浏览器 class html

我们知道单行文字垂直居中时只用让height=line-height即可,那么图片以及多行文字是如何垂直居中的呢?现以如下图片和代码为例,将我搜集得到的方法做一个总结说明:

html代码:

<div class="box">
   <img src="images/baymax.jpg">
</div>

css代码:

.box{
    width: 500px;
    height: 500px;
    margin: 50px auto;
    background: bisque;
    text-align: center;
}

可以看到现在浏览器显示是这样的,div在浏览器里是水平居中,图片相对div也是水平居中。那么下面就采取办法使其可以垂直居中,见证奇迹的时刻到啦~~~~

图1
1PNG

一、position定位和margin(不兼容IE6/7)

html代码:

<!--给img标签再嵌套一个div-->
<div class="box">
    <div class="imgbox">
        <img src="images/baymax.jpg">
    </div>
</div>

css代码:

.box{
    width: 500px;
    height: 500px;
    margin: 50px auto;
    background: bisque;
    position: relative;
}
.imgbox{
    width: 300px;
    height: 307px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

图2
3

可以看到div水平居中,img相对父元素垂直居中。但是固定了图片的宽高,且不兼容IE6/7。那么在不知道子元素高度的时候如何垂直居中呢?

二、display:table-cell(IE6/7不兼容)
display:table-cell的作用即是让标签元素以表格单元格的形式呈现,类似于td标签。多行文字可以套一个span标签,加display:inline-block;属性,其他相同。且display:table-cell与float:left或是position:absolute可能会发生冲突,所以尽量不要同时使用。但是display:table-cell元素对margin值无反应。所以会造成本例中div元素不再相对浏览器水平居中。如下所示:

 .box{
    width: 500px;
    height: 500px;
    margin: 50px auto;
    background: bisque;
    text-align: center;
    /*添加一下两行代码,使图片垂直居中*/
    vertical-align: middle;
    display: table-cell;
}

图3
2

可以发现,图片相对div垂直居中了,但是div的margin: 50px auto;却不起作用了。而且IE6/7也不兼容。

三、display:table-cell和针对IE6/7的position和margin(兼容IE6/7)

<!--给img标签再嵌套一个div-->
<div class="box">
    <div class="imgbox">
        <img src="images/baymax.jpg">
    </div>
</div>

css代码:

.box{
    width: 500px;
    height: 500px;
    margin: 50px auto;
    background: bisque;
}
.imgbox{
    width: 500px;
    height: 500px;
    text-align: center;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    *line-height: 500px;
}
.imgbox img{
    *position: relative;
     _top: 50%;
    _margin-top: expression(this.height/2*-1);
}

图4
3

可以看到,div水平居中,img相对父元素垂直居中。且兼容IE6/7。所以,大功告成~~~

登录 后评论
下一篇
云栖号资讯小编
27324人浏览
2020-07-13
相关推荐
IE CSS bug--hack
843人浏览
2010-08-01 11:01:00
IE6 bug集
1049人浏览
2017-11-21 15:37:00
html css 图片居中
1449人浏览
2015-09-12 10:41:00
html5 css 万能的position大法
923人浏览
2016-07-21 11:23:25
css的常用效果总结
718人浏览
2017-11-29 10:10:00
CSS 居中方法总结
9477人浏览
2018-09-17 01:43:47
HTML与CSS布局技巧总结
1155人浏览
2018-09-23 11:17:02
HTML与CSS布局技巧总结
235人浏览
2020-05-14 08:40:49
1
0
0
1330