Единая ссылка

[Barsam]

Коллеги, здравствуйте!

Есть такая конструкция:

<a href="#"><img src="pic.png">Ссылка на пик</a>

Допустим высота изображения 50px;

Как выравнить текст относительно середины изображения по высоте.

|____________|

|____________|

|__pic.png____| Ссылка на пик

|____________|

|____________|

Оговорюсь сразу, что вопросы с применением JavaScript, jQuery и т. п. не интересуют.

Просьба помочь решить проблему чисто с точки зрения вёрстки.

Благодарю за помощь!

Edited October 26, 2012 by Barsam

[Aleksey19881988]

эксперементировать с display:table не пробовали?

[npofopr]

Так нет?

<a href="#"><img align="middle" src="http://lorempixel.com/400/200/sports/1/">Ссылка на пик</a>???????????

[Vin]

http://jsfiddle.net/villard/PSsJY/

[USF]

vertical-align: middle

http://jsfiddle.net/usfe/vk7HC/1/

http://jsfiddle.net/villard/PSsJY/

надпись снизу Оо а надо сбоку, не?

[Vin]

надпись снизу Оо а надо сбоку, не?

Да, я с другой задачей перепутал

[Barsam]

vertical-align: middle

http://jsfiddle.net/usfe/vk7HC/1/

Это первое, что я попробовал. В моём проекте не работает.

В этом макете всё красиво, но в макете выравнивается по нижней кромке картинки.

Вообще мне надо оптимизировать под IE8, но и в FireFox 16 тоже самое.

Код выгляди примерно таким образом.

<table>
<tr>
<td>
<a href="#"><img src="https://si0.twimg.com/profile_images/1139325452/logo-support.png"><span>Ссылка на пик</span></a>
</td>
</tr>
</table>

Может быть будут идеи как поправить, или хотя бы из-за чего это может быть?

Сразу отвечу на один вопрос. vertical-align: middle ничем не пререкрывается.

Вот что выдаёт фаербаг:

font-family	 Tahoma,Arial,sans-serif
font-size	 12px
font-weight	 400
font-style	 normal
font-size-adjust none
color	         #474747
text-transform   none
text-decoration  none
letter-spacing   normal
word-spacing	 0
line-height	 14px
text-align	 left
—--vertical-align middle——--
direction	 ltr
text-overflow	 clip
background-color	transparent
background-image	none
background-repeat	repeat
background-position	0 0
background-attachment	scroll
opacity	                1
width	                auto
height	                auto
top	                auto
right	                auto
bottom	                auto
left	                auto
margin-top	        0
margin-right	        0
margin-bottom    	0
margin-left	        0
padding-top	        0
padding-right    	0
padding-bottom	        0
padding-left	        0
border-top-width	0
border-right-width	0
border-bottom-width	0
border-left-width	0
border-top-color	#474747
border-right-color	#474747
border-bottom-color	#474747
border-left-color	#474747
border-top-style	none
border-right-style	none
border-bottom-style	none
border-left-style	none
box-shadow	        none
position	        static
display	                inline
visibility	        visible
z-index	                auto
overflow-x	        visible
overflow-y	        visible
white-space	        nowrap
clip	                auto
float	                none
clear	                none
cursor                  pointer
list-style-image	none
list-style-position	outside
list-style-type	        none
marker-offset	        auto

[USF]

лучше ссылку на рабочий вариант дайте

[SelenIT]

но в макете выравнивается по нижней кромке картинки.

Значит, что-то перебивает этот vertical-align. Проверьте файрбагом, что именно. Чудес не бывает, у всего есть рациональные объяснения... как правило

[Barsam]

Так нет?

<a href="#"><img align="middle" src="http://lorempixel.com/400/200/sports/1/">Ссылка на пик</a>???????????

Не поверите, но даже так не работает.

Это полтергейст?

но в макете выравнивается по нижней кромке картинки.

Значит, что-то перебивает этот vertical-align. Проверьте файрбагом, что именно. Чудес не бывает, у всего есть рациональные объяснения... как правило

<span style="vertical-align: middle !important;">Ссылка на пик</span>

Фаербагом проверил почти сразу же. Всё на месте, ничем не перекрывается.

как правило - видимо как раз тот самый случай...

лучше ссылку на рабочий вариант дайте

Дал бы, но не могу (нет физического пути, да посадят меня...). Сайт является внутренним порталом.

Edited October 26, 2012 by Barsam

[USF]

жаль, позможно что-то делает элемент блчным(может есть float'ы)

[Barsam]

Нет, не блочный. Тем более я кидал выписку из фаербага.

Но я разобрался в чём проблема. Вот сейчас решаю.

Дело в том, что ссылка находится в td. В td картинка выравнивается по верхнему краю, а ссылка по нижнему.

Да, картинка находится в ссылке, но по фаербагу, она выходит за рамки ссылки. Блок ссылка по высоте включает в себя только текст, а по ширине - и текст и часть картинки.

[npofopr]

Попробуйте с меньшего.

Удалить все лишнее с вашей страницы.

Оставить только ту ссылку с картинкой и поэтапно добавлять элементы + стили.

[Barsam]

Попробуйте с меньшего.

Удалить все лишнее с вашей страницы.

Оставить только ту ссылку с картинкой и поэтапно добавлять элементы + стили.

Это не представляется возможным. Проект является гигантским проектом на ASP. Тут не одна страничка, а огромное количество кусочков, подключаемых css и т. д.

[Barsam]

Всё починил, всем спасибо. Если что всё чинится элементарно. Ставьте изображению float:left; если изображение перед ссылкой))))))

Как всё было просто ))

[SelenIT]

float:left; если изображение перед ссылкой

Это как раз верный способ отправить выравнивание фтопку, как только картинка окажется другой высоты. Наличие таблицы на vertical-align потомков ссылки не влияет.

В Опере вертикальное выравнивание в строке, бывало, могло ломаться при Transitional-доктайпах, но в Firefox подобного не видал...

ссылка по высоте включает в себя только текст, а по ширине - и текст и часть картинки

Это нормально, инлайновое форматирование так и работает.