CODEWITHSUNDEEP
htmlcss
Delmon Young
Delmon Young

Reputation: 2053

Positioning an image inside a link

I’ve got some markup that doesn’t have much flexibility. It contains a simple link with an image inside of it. I’m trying to use CSS to get the image to display below the text. However, the only way I can do this is with absolute positioning. I thought there was another way to do this without having to resort to that. Any ideas? Also, I’m trying to get the image to display to the right of the text. I can do this by floating the image to the right, but the image appears all the way to the right of the container. Does anyone know how I can get the image to appear right next to the text? I don't really have the flexibility of adding a span tag around the link text.

a img{ position: absolute; top:30px }
<a href="#">
  <img src="http://placehold.it/350x150”> 
  Enter Header
</a>

Upvotes: 0

Views: 2712

Answers (4)

dippas
dippas

Reputation: 60553

Not using position as you mentioned in your question, and keeping the same HTML you can put image right sided to text:

see the snippet below: 

a {
  display: inline-block;
  width: auto;
}
a img {
  float: right;
  margin-left: 10px;
}
<a href="#">
  <img src="http://placehold.it/150x100" />Enter Header
</a>

UPDATE Based on OP question in comment here is how to put text above image.

Thanks, what about the instance when I want the text above the image?

and after a discussion with OP, it was possible to use position after all.

a {
  position: relative;
}
a img {
  position: absolute;
  top: 25px
}
<a href="#">
  <img src="http://placehold.it/150x100" />Enter Header
</a>

Upvotes: 1

user3267755
user3267755

Reputation: 1070

Try using CSS display block.

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

a img {

}

To use float properly, you need to have a container (DIV) at a set width. I believe this is what you're looking for (jsfidd link).

Upvotes: 0

Monte
Monte

Reputation: 1016

this should work:

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

fiddle: http://jsfiddle.net/Monteduro/nt44h5r5/14/

Upvotes: 0

coopersita
coopersita

Reputation: 5041

Try setting the a as block, and relative:

a { display: block; position: relative }

Upvotes: 0

Related Questions