Вертикальное выравнивание изображения внутри якоря с помощью CSS

Я хотел бы вертикально выровнять изображение внутри элемента привязки следующим образом:

<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>

Я прочитал много сообщений, но ни один из них не работает для меня. Я также использую класс миниатюр Bootstrap, я не знаю, связано ли это, и это причина, по которой он не работает.

Я прочитал, я могу сделать это, установив высоту строки, но что-то не так.

Пожалуйста, смотрите простой плункер.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

UPDATE: Я обновил плункер. Текстовое вертикальное выравнивание работает нормально, но оно по-прежнему не работает для изображений.

Ответы

Ответ 1

Попробуйте следующее:

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

Добавьте display: inline-block; и установите line-height в элемент родительского элемента привязки для вертикального выравнивания изображений по вертикали.

ЖИВОЙ ПРИМЕР