Вертикальное выравнивание картинки в ссылке

[anipriev]

Добрый день. Никак не могу решить проблему вертикального выравнивания картинки в ссылке.

 

HTML код:

<div class="portf">       <a href="#"><img src="../userfiles/tovaryimg/1.png" alt="" /></a>        </div>

CSS код:

.portf{	text-align:center;	border:2px solid #0F0;	margin:50px 0 10px 20px;}.portf a {	border:2px solid #FFF7AF;	width:300px;	height:300px;	}.portf a img{	width:250px;}

Пробовал применить к .portf a свойство display:table-cell; vertical-align:middle; 

 

Не выравнивается картинка по вертикали.

 

Помогите решить проблему.

[pangurban]

Например так

Edited October 20, 2014 by pangurban

[Q4Dizzy]

Пробовал применить к .portf a свойство display:table-cell; vertical-align:middle; 

 

 

а к блоку-родителю display: table; применяли?

[anipriev]

Пробовал применять к блоку-родителю display: table; Не помогает.

 

Вот ссылка на сайт http://dedal-agro.ru. На главной странице ссылка 300х300 px. В ней картинка. Картинка не всегда может быть квадратной, поэтому и хочется чтобы она отображалась по центру ссылки.

[anipriev]

Я тут разобрался немного. Дело в том что у меня в блоке работает скрипт который плавно меняет картинки. Видимо он и не дает центрировать картинку по вертикали. Если просто одну картинку в ссылку прописать то всё получается.

[Switch74]

у вас ссылки имеют display:block или none

[anipriev]

Вообще пробовал для ссылок display:table-cell; vertical-align:middle;.

Если в блоке оставить только одну ссылку с картинкой, то картинка выравнивается по вертикали. Но у меня в блоке находятся несколько ссылок с картинками и скрипт отображает их по очереди, и почему-то картинка по вертикали не выравнивается. Я думаю что это скрипт прижимает картинку к верхнему краю.

[Switch74]

ваш скрипт, меняет для каждой картинки свойство display с block на none и обратно пусть ваш скрипт меняет на table-cell

[CoDy]

Мож такое прокати: http://jsfiddle.net/zhn0jfof/1/

 

Фмксированный размер контейнера картинки и выравнивание/вписывание по центру картинки произвольного размера.

Edited October 20, 2014 by CoDy