用JQuery使列表中的圖片水平垂直居中顯示
阿新 • • 發佈:2018-12-28
像案例中心這些放置小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>
居中效果圖:
這裡統一使用了同樣的圖片,可以換圖片試效果。
如果有什麼地方錯誤,歡迎指出!