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

Posted 木西梧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了未知宽高的图片水平垂直居中的几种方法相关的知识,希望对你有一定的参考价值。

最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用。

 

1. 背景法(兼容性好,简单,但不利于动态导入的图片)

 

html

<div class="wrap"></div>

css:

.wrap{
    width:300px;
    height:200px;
    background: url(../img/test.jpg) center center no-repeat;
}

 

2. 图片外面用个p标签,通过设置line-height使图片垂直居中(兼容性较好)

 

html:

<div class="wrap">
    <img src="./img/test.jpg">
</div>

css:

.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    text-align: center;
}
.wrap p{
    width: 300px;
    height: 300px;
    line-height: 300px;
}
.wrap p img{
    *margin-top:expression((300 - this.height )/2);
    vertical-align: middle;
}        

 

3. 利用display:table-cell(不兼容IE6、7)

 

html:

<div class="wrap">
    <img src="./img/test.jpg">
</div>

css:

.wrap{
    width: 300px;
    height: 200px;
    border: 1px dashed #ccc;
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

 

4. 添加table标签(兼容性好,但是冗余标签比较多)

 

html:

<div class="wrap">
    <table>
        <tr>
            <td align="center"><img src="./img/test.jpg"/></td>
        </tr>
    </table>
</div>

css:

.wrap{
    width: 300px;
    height: 200px;
    border: 1px dashed #ccc;
    text-align: center;
}
.wrap table{
    width: 300px;
    height: 200px;
}   

 

以上是关于未知宽高的图片水平垂直居中的几种方法的主要内容,如果未能解决你的问题,请参考以下文章

让一个元素水平垂直居中的几种方法

未知宽高的div怎么垂直水平居中

js实现元素水平垂直居中

未知盒子宽高使盒子垂直水平居中

一个未知宽高的元素在div中垂直水平居中

div+css实现未知宽高元素垂直水平居中