CSS图片垂直居中-兼容各浏览器的完美解决方案

SJY发表于:2018年05月13日 12:14 • 阅读:

兼容所有浏览器
在图片之前,加一个空元素,CSS设置为 display: inline-block; height: 100%; vertical-align: middle; 然后在图片中设置vertical-align: middle;示例演示

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>图片垂直居中</title>
<style>
*{
        margin:0;
        padding:0;
}
div{
        height:300px;
        background:#FCC;
}
p{
        height:60px;
        background:#FC6;
        position:absolute;
        top:120px;
        left:500px;
}
.helper{
        display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img{
        vertical-align: middle;
}
</style>
<div><span class="helper"></span><img src="image.jpg"></div>
<p>
div元素高 300px<br />
p元素高60px<br />
要使p元素垂直与div元素,需要距离div元素顶部 (300-60)/2=120px
</p>
<b>找一找高度为60的图片,或把图片高度设置为60,如果图片跟p元素,高度贴合,说明完全垂直居中</b>

如果不希望添加额外的标签<span class="helper"></span> 可以用下面的方法
只针对标准浏览器
CSS

div:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

兼容IE低版本浏览器
除了使用标准浏览器的CSS代码外,还要加上IE表达式

div:before,div_before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
div{
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="div_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}


参考文献http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div
 

欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/1366.html

标签: 垂直居中

回复(0)