26

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.

2 Answers 2

42

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

0
0

flex layout solution without fixed line-height:

add div wrapper

    <a href="#" class="thumbnail">
        <div class="d-flex justify-items-center">
           <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
        </div>
    </a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.