So 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> |
This is a pretty basic way, there are many more methods to vertical align an image with css.
If you know other methods, please share in the comment section, so others will learn more.