Thursday, June 23, 2016

How to vertical align an image inside an anchor

To vertical align an image inside an anchor, there are 3 necessary parts inside the CSS:

1. Your anchor should have same  height and inline-height.
2. Your image should have vertical-align: middle;
3. Your image should have display: inline-block;

<style>
    .thumbnail {
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
    }
    .thumbnail img {
        margin: auto;
        vertical-align: middle; 
    }  
</style>
Reference:
http://stackoverflow.com/questions/20700475/vertical-align-image-inside-an-anchor-with-css
http://plnkr.co/edit/b5jEtK5EWVglrhEkj14e?p=preview

No comments:

Post a Comment