Jayden Jayden - 4 months ago 10
CSS Question

Aligning text link beside image link

I want to change from


------------

| IMAGE |

------------

TEXT


To


------------

| IMAGE | TEXT

------------


is there any way i can align the text in [a] beside the image?

my codes are as follow:

<a href="link.html">
<img src="image.png"> text
</a>


can anyone enlighten me on this?

the parent codes are as follow:

<div class="col-md-4">
<div class="parent">
<a href="#"><img src="image.png"> text< /a>
<a href="#"><img src="image.png"> text< /a>
<a href="#"><img src="image.png"> text< /a>
</div>
</div>


I realised that i added the br tags in the question above. I've already took it out.

I'm new to this site, pardon me.

this is my output:
http://i.stack.imgur.com/Altu8.png

Answer

Here is a solution (which requires more markup and styling):

https://jsfiddle.net/v3uhq9ez/1/

HTML:

<a id="anchor" href="link.html">
<div id="image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/bill.png"/></div>
<div id="paragraph">text</div>
</a>

Styling:

#paragraph{
  float:left;
  height: 90px;
  line-height: 90px;
}
#image{
  float:left;
  width:90px;
}
#image img{
  width:90px;
}

Or as Tushar indicated:

<a href="link.html" > <br>
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/bill.png"/> text<br>
</a>


a img {
  vertical-align: middle;
}
Comments