像案例中心这些放置小LOGO的地方,有些logo图片的尺寸都无法做到一致,也没功夫用PS统一尺寸,这时候可以使用line-height+text-align: center来自动居中,
在不使用line-height的情况下,用text-align: center和JS使小图片自动垂直居中,原理:
img的CSS:position: relative;然后用top:calc(50% - 图片高度的50%);来完成垂直居中。
然后用JS来完成计算每张图片的top。
.case .case_logo_ img{ width: 200px; position: relative; }
<div class="case">
<div class="layout_container">
<div class="row">
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
<script type="text/javascript">
var case_l = $(".case .s6").length
var caseDOM = $(".case .s6")
console.log(case_l)
for (var i = 0; i < case_l; i++) {
var case_H = caseDOM.eq(i).find("img").height()
var case_bH = caseDOM.eq(i).find("div").height()
caseDOM.eq(i).find("img").css("top",(case_bH / 2) - (case_H / 2))
console.log(case_H + "/=" +(case_H/2))
}
</script>
</div>
<a href="" class="more_btn transion">进入案例中心</a>
</div>
</div>
居中效果图:
这里统一使用了同样的图片,可以换图片试效果。
如果有什么地方错误,欢迎指出!