[Решено] Выравнять <img> внутри тега <a> - Вопросы по CSS

Помогите с вертикальным выравниванием картинки внутри тега <a>. Мучаюсь четвертый день, а толку ноль. Картинка постоянно "прилипает" к верху блока. Посмотреть можно тут, там только одна картинка в рамке.

http://flat-cable.com.ua/terrashop1/component/virtuemart/6/20340__Nokia_2650-detail.html?Itemid=0

Главная сложность в том что картинка не имеет фиксированой ширины и высоты (некоторые картинки маленькие, и растягивать их на весь блок будет некрасиво) но в тоже время задается парамметр max-width и max-height, что бы не вылазила за рамку.

Код: css

.main-image {display: table-cell;}

А можно поподробнее? А то если просто применить этот парамметр, то картинка становиться очень больгой и вылазит за рамки.

Код: css

.main-image {display: table-cell;}

скорее всего не сработает
наверное так стоит попробовать

все работает
просто нужно убрать

.main-image a {
height: 100%;
width: 100%;
}

все работает
просто нужно убрать

.main-image a {
height: 100%;
width: 100%;
}

Нужно было не у тега <a> убрать height и width , а у <img> парамметр   max-width:100%;

скорее всего не сработает
наверное так стоит попробовать

Код

.main-image {
display: table;
}
.main-image a{
display: table-cell;
vertical-align:middle;
}

Помогло! ОГРОМНОЕ СПАСИБО.


По плюсику за помощь ;-)