Text above an image

I have 3 images side by side and want different text above each image but not sure how to do it.

This is the code

<div style="text-align: center;"><a
 href="urlhere"
 target="_blank"> <img
 src="test.jpg" alt=""
 border="0" /></a> - <a
 href="urlhere"
 target="_blank"><img
 src="test.jpg" alt=""
 border="0" /></a> - <a
 href="urlhere"
 target="_blank"><img
 src="test.jpg" alt=""
 border="0" /></a></div>
<br />
</center>
</div>

Code (markup):

I tried alligning 'top' but it kept messing up? Thanks

 

You can use table of 3 cells, place each image as background image for each cell and fill each cell with text you need.

 

Use this method:

<div style="min-width:98%; max-width:98%; width:100%;">
<span style="float:left; width:33%; text-align: center;">
TEXT 1
<br />
<a href="urlhere" target="_blank"> 
<img src="test.jpg" alt="" border="0" /></a>
</span>
<span style="float:left; width:33%; text-align: center;">
TEXT 2
<br />
<a  href="urlhere" target="_blank">
<img  src="test.jpg" alt=""  border="0" /></a>
</span>
<span style="float:left; width:33%; text-align: center;">
TEXT 3
<br />
<a href="urlhere" target="_blank">
<img src="test.jpg" alt="" border="0" /></a>
</span>
</div>
<br />
</center>
</div>

Code (markup):

width:100% is used to center your images across the page in IE/Opera, min-width:98%; max-width:98%; is used to avoid FireFox/Netscape unwanted horizontal scrollbar, you can change these values though.