html - Vertically centered images inside card -


is there way how vertically center images inside card view, if not equal height?

<div class="ui 3 cards">     <div class="ui card">         <div class="image">             <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/1/aparat1.jpg"> </div>         <div class="content">lorem ipsum dolor sit.</div>     </div>      <div class="ui card">         <div class="image">             <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/2/aparat2.jpg"> </div>         <div class="content">lorem ipsum dolor sit.</div>     </div>      <div class="ui card">         <div class="image">             <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/3/aparat3.jpg"> </div>         <div class="content">lorem ipsum dolor sit.</div>     </div> </div> 

i used js put div.img in equal heights. here fiddle.

by jsfiddle example made changes.

what changed :

  1. from every img class="ui image" removed
  2. after equalheight('.ui.card div.image'); put more javascript code

js code first find divs have in class cards. then, search img tags inside divs.

then calculating height of img tag , parent div, divided 2 , subtracted img top position.

after calculation made, in img putted, added maring-top:*calculation*px

there jsfiddle example

this ok, opinion, if can remove class img.

i hope need.


Comments