实现不同尺寸的图片在固定的区块内实现水平垂直居中

利用absolute定位的不固定宽高垂直实现方法(position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;)

展示效果

html

<div class="cooperate-content">
    <div>
        <div><img src="secure-partner7.png?v=6.2.68"></div>
        <div><img src="secure-partner6.png?v=6.2.68"></div>
        <div><img src="secure-partner16.png?v=6.2.68"></div>
        <div><img src="secure-partner3.png?v=6.2.68"></div>
        <div><img src="secure-partner14.png?v=6.2.68"></div>
        <div class="no-margin"><img src="secure-partner9.png?v=6.2.68"></div>
    </div>
    <div>
        <div><img src="secure-partner10.png?v=6.2.68"></div>
        <div><img src="secure-partner12.png?v=6.2.68"></div>
        <div><img src="secure-partner15.png?v=6.2.68"></div>
        <div><img src="secure-partner2.png?v=6.2.68"></div>
        <div><img src="secure-partner5.png?v=6.2.68"></div>
        <div class="no-margin"><img src="secure-partner13.png?v=6.2.68"></div>                
    </div>
    <div>
        <div><img src="secure-partner1.png?v=6.2.68"></div>
        <div><img src="secure-partner8.png?v=6.2.68"></div>
        <div><img src="secure-partner11.png?v=6.2.68"></div>
        <div><img src="secure-partner4.png?v=6.2.68"></div>
        <!-- <div class="no-margin "><img src="secure-partner4.png?v=6.2.68"></div> -->
        <div class="hope">期待您的加入 ··· ··· </div>
    </div>
</div>

css:

.cooperate-content {
    width: 1024px;
    height: 325px;
    margin: 0 auto;
    overflow: hidden;
}
 .cooperate-content>div div {
    position: relative;
    display: inline-block;
    width: 149px;
    height: 81px;
    line-height: 81px;
    vertical-align: middle;
    background-color: #FFF;
    margin: 0 20px 40px 0;
}
.cooperate-content img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

 

posted @ 2019-01-09 11:29  心向阳  阅读(380)  评论(0编辑  收藏  举报