If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Row of centered images and text

I'm trying to create a row of banner-like images, centered and gap between each auto-adjusted, each with an aligned text below it. I tried to use the CSS property columns, but I'm unable to change the amount of space between each element.

But the moment I add "column-gap:5px;" the pictures won't be in a single row anymore and the formatting is completely messed up. I also need an identifier for each text, as I'm gonna need to fade in/out these text when the mouse hovers over each image, which I'll do once the formatting is done.

Just use a table, collapse borders, border:none and use 1 row for images the next for text.
Don't specify height and the table cells will auto adjust to fit you images and the text below them.
text-align:center then add padding and text format as needed.

Divs are useful but if you got a lot and they are the same I find a table works quite well with other elements in the page.

CSS has a row:hover and so does JavaScript, both pretty easy to use and you can throw both in there for IE and for FF.

You can probably get away with using two row classes and this will let you hover some and ignore others.

Firstly, change your divs to classes then you only need one class (without having to use nested CSS which can cause problems later down the line) and float each one to the left. How I would do it (your total image widths (width plus margin) don't fit into your container size so I have adjusted bits accordingly):

HTML Code:

<div class="container"><div class="pic"><img src="pictures/characters/1.png"><span id="pic1text">text1</span></div><div class="pic"><img src="pictures/characters/2.png"><span id="pic2text">text2</span></div><!-- And so on for each image -->