How to vertical align an image with css?

It is quite easy to vertical align an image with css.

Put your image inside a div.

Add this css style to your image:

2
style="max-height:150px; position: relative; top: 50%; transform: translateY(-50%);"

Full example:

2
3
4
<div style="width:150px; height:150px; background-color:#F7F7F7;" align="center">
<img src="lost_images/lost_images_thumbs/'.$image.'" class="img-responsive" style="max-height:150px; position: relative; top: 50%; transform: translateY(-50%);">
</div>

Image vertical align

ADD A COMMENT: