Inserting Images with Captions?

[Shelley]

Hi everyone! I'm really new to html, and I feel as though I have a really simple problem that needs to be fixed, however I just can't seem to figure it out. Well I have a page here ... http://www.neopets.com/~Phean

and well I've made trophies for my guild activities and I want them to behave like the neopets trophies, with the image and caption centered underneath. I want them to be able to line up next to each other when added to a page, however right now they just want to stack up on top of each other. Does anyone know how I can get them to line up across the page? The current coding I've used is displayed under each image.

thanks!

[Xepha]

Sorry if it looks silly, but I'm going to quote myself and edit that quote.

 

If you are wondering how it works, inline-block allows to have div placed next to each others. ;) You can put anything you want in the nested divs (images, textareas, text...)

 

[...]

 

CSS to add to your page

 

#fancyName {text-align: center;}
#fancyName div {display: inline-block; vertical-align: top; width: 140px; margin: 5px;}

The HTML would then look like this

 

<div id="fancyName">

<div>
<img src="https://images.neopets.com/items/piratepntbrush.gif" alt="Pirate Paint Brush" /><br />Pirate Paint Brush
</div>

<div>
<img src="https://images.neopets.com/items/piratepntbrush.gif" alt="Pirate Paint Brush" /><br />Pirate Paint Brush
</div>

<div>
<img src="https://images.neopets.com/items/piratepntbrush.gif" alt="Pirate Paint Brush" /><br />Pirate Paint Brush
</div>

<div>
<img src="https://images.neopets.com/items/piratepntbrush.gif" alt="Pirate Paint Brush" /><br />Pirate Paint Brush
</div>

<div>
<img src="https://images.neopets.com/items/piratepntbrush.gif" alt="Pirate Paint Brush" /><br />Pirate Paint Brush
</div>

</div>

Notes:

You can change the value of the width in the CSS, depending how many items you want to see per row.