изображение позиции внизу <a> tag

Question

Как разместить изображение для выравнивания с нижней частью тега <a>?

у меня есть:

<a href=""><img src="" /><span>text</span></a> 

Прямо сейчас, изображение кажется, насколько выше <a> несколько пикселей.

Я пробовал:

img { vertical-align: bottom; } 

но что двигалось слишком далеко вниз.

Answer 1

Вы можете использовать vertical-align: baseline;, который выравнивает нижний край <img> элемента вдоль базовой линии тексте, а не vertical-align: bottom (который, как вы нашли, выравнивает дно <img> от нижнего края родителя <a>, который немного ниже, чем у baseline, для размещения нисходящих участков букв, таких как g, p, q и y должен идти).

Итак, я предлагаю:

a img { 
 
    vertical-align: baseline; 
 
}

<a href="#"> 
 
    <img src="http://lorempixel.com/200/200/nightlife" /><span>text</span> 
 
</a>

Ссылки:

• vertical-align.

Answer 2

Если вы посмотрите на мой пример здесь, вы можете увидеть, что на самом деле они выровнены: http://jsfiddle.net/jzsmy629/2/

Добавление границы покажет вам, где ваши блоки:

HTML:

<a href=""><img src="http://placehold.it/45x45" /><span>text</span></a> 

CSS:

img { vertical-align: bottom; border:solid 1px black; } 
span { border: solid 1px black; }