Help Me: Aligning Images

[jontqy]

Can anyone help me please.

I have a number of divs in my code, no tables.

I want to align my images, some aligned vertically to the top, some to the middle and some to the bottom.

How do I go about this - at the moment I have been trying this;

#title {top:0; left:0; width:100%; height:30; }
.imgtop { vertical-align:top; }
.imgbot { vertical-align:bottom; }

<div id="title">
<img class="imgtop" src="....." />
</div>
<div id="title">
<img class="imgbot" src="....." />
</div>

but they all align to the top of the div holder.

any help would be great.

[Lister14]

have you tried absolute positioning?

[Ian Glass]

You can only have one ID of a particular name on a page. Whydon'ca change the IDs to clases.

That's just what jumped out to me, at first. :-)

~~Ian

[dense13]

Some things about your CSS (but not a solution, oops)

1) Ian's right, you must use each ID only once.

2) Using the 'top' and 'left' properties without the 'position' property has no effect. May I ask what did you want to achive by assigning them a 0 value?

3) The 'vertical-align' property doesn't work here, because it aligns inline boxes inside an inline element, applying it to the container inline element. If you are not familiar with these terms, I can try to make it simpler through an example.

And the way to do it? If you know the size of the images, you can use absolute positioning. Or add them as backgrounds to the DIVs. And there are possibly other solutions.

Hope some of this helps!