Vertical align image inside an anchor with CSS


I would like to vertical align an image inside an anchor element like this:

<ul class="thumbnails">
    <li class="span2"> 
        <a href="#" class="thumbnail">
           <img src="" style="max-height: 150px">

I have read many posts but none of them works for me. I´m also using a Bootstrap thumbnails class, I don´t know if this is related and it´s the reason it doesn’t work.

I have read I can do it setting a line-height but something is wrong.

Please see a simple plunker.

I have updated the plunker. Text vertical align is working ok, but it still doesn´t work for images.


Try this:

.thumbnail {
    line-height: 150px; // height taken from OPs plunker
.thumbnail img {
   margin: auto;
   vertical-align: middle; 
   display: inline-block;

Add display: inline-block; and set the line-height to the parent anchor element to middle align images vertically.


Answered By – Rahil Wazir

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published