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>
by jsfiddle example made changes.
what changed :
- from every
imgclass="ui image"removed - after
equalheight('.ui.card div.image');put morejavascriptcode
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
Post a Comment