Позиционирование изображения внутри ссылки

Question

У меня есть разметка, которая не имеет большой гибкости. Он содержит простую ссылку с изображением внутри него. Я пытаюсь использовать CSS для отображения изображения под текстом. Тем не менее, единственный способ сделать это - это абсолютное позиционирование. Я думал, что есть еще один способ сделать это, не прибегая к этому. Есть идеи? Кроме того, я пытаюсь отобразить изображение справа от текста. Я могу сделать это, плавая изображение вправо, но изображение появляется полностью справа от контейнера. Кто-нибудь знает, как я могу заставить изображение появиться рядом с текстом? У меня действительно нет гибкости добавления тега span вокруг текста ссылки.

a img{ position: absolute; top:30px }

<a href="#"> 
 
    <img src="http://placehold.it/350x150”> 
 
    Enter Header 
 
</a>

Answer 1

Не используя position как вы упомянули в своем вопросе, и сохраняя тот же HTML вы можете поместить изображение правостороннего к тексту:

см сниппают ниже:

a { 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 
a img { 
 
    float: right; 
 
    margin-left: 10px; 
 
}

<a href="#"> 
 
    <img src="http://placehold.it/150x100" />Enter Header 
 
</a>

ОБНОВЛЕНИЕ На основе вопроса OP в комментарии здесь описано, как поместить текст выше изображения.

Спасибо, а как насчет экземпляра, когда я хочу текст над изображением?

и после обсуждения с ОР, можно было использовать position после всех.

a { 
 
    position: relative; 
 
} 
 
a img { 
 
    position: absolute; 
 
    top: 25px 
 
}

<a href="#"> 
 
    <img src="http://placehold.it/150x100" />Enter Header 
 
</a>

Answer 2

Попробуйте использовать блок отображения CSS.

http://jsfiddle.net/nt44h5r5/15/

a img { 

} 

Чтобы использовать поплавок должным образом, вам необходимо иметь контейнер (DIV) при заданной ширине. Я считаю, что это то, что вы ищете (ссылка jsfidd).

Answer 3

установка а, как блок Try, и относительна:

a { display: block; position: relative } 

Answer 4

это должно работать:

a img { 
    display:inline-block; 
    vertical-align:middle; 
    float:right; 
} 
a { 
    display:inline-block; 
    line-height:150px; (or any height of the image) 
} 

скрипку: http://jsfiddle.net/Monteduro/nt44h5r5/14/