使用HTML、CSS布局实现图片垂直居中-优快云博客

1.利用vertical-align:middle；父级元素设置成display:table-cell; 同级元素设置一个span标签设置display:inline-block；图片样式设置vertical-align:middle;

添加的span标签要给高度100%; display:inline-block;

HTML

<div>
    <span></span>
    <img src="images/list3_1.jpg">
</div>

　css

<style type="text/css">
    div {
        width: 400px;
        height: 300px;
        display: table-cell;
        /*水平居中*/
        text-align: center;
    }
    div span{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    div img {
        vertical-align:middle;
    }

</style>

　实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
    div {
        width: 400px;
        height: 300px;
        display: table-cell;
        /*水平居中*/
        text-align: center;
    }
    div span{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    div img {
        vertical-align:middle;
    }

</style>

<div>
    <span></span>
    <img src="images/list3_1.jpg">
</div>


</body>
</html>

2.上面的结构会多个多余的标签

HTML

<div>
<a href="">
<img src="">
</a>
</div>

　CSS

div {
width:221px;
height:70px
}
div a{
display:inline-block;
width:221px;
height:70px;
line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/
text-align:center; /*水平居中*/

}
div a img{
vertical-align"middle;
}

兼容 IE7+以上可以　　

转载于:https://www.cnblogs.com/xxx91hx/p/4806634.html