Image and text alignment

How to align images and text together with CSS?

[magsy]

Hi,

I'm trying to write a little script to align a text label alongside an image, so the image can sit to the left, right, above or below the text. When the text is to the left or right, it will need a vertical align of 'middle', or something along those lines.

The problem I have is that I don't know the size of the image in advance, and I'm having to use absolute positioning, so in the following example:

<button style="height: 45px; width: 82px">
<img style="width: 100%"
src="moo.jpeg" />
<span>My label</span>
</button>

My button has been set to 45x82, but my image could be 200x300 (silly, I know, but a requirement). I discovered that setting the width to 100% would force the browser to shrink the image, but the text will not always show (it's dependent on the size of the button).

So given an unknown image size, a button that's absolutely positioned with a known size, how do I achieve the above?

The really annoying part comes in the positioning of the label (north/south/east/west of the image).

Any help much appreciated!

John B

[johnnie]

You could try wrapping a div around your image+text. Then position the div and you should be set.

[magsy]

Sadly I've tried lots of combinations of divs wrapped around the image and text, but it all boils down to the same thing. The image takes preference over the text (if the text comes after the image) so the browser renders the image to it's full size, and then there's no room for the text...