Vertical align image inside an anchor with CSS

Question

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="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">         </a>     </li> </ul> 

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.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

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

Answer 1

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.

LIVE EXAMPLE