实现不同尺寸的图片在固定的区块内实现水平垂直居中
利用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; }