vertical align

[Halcrow]

I have placed an image (200x roughly 130px) inside a div tag with width and height 212px. I want to align the image, using CSS, so that it sits at the bottom of the div. I've tried the vertical-align property but nothing happens. I can only get the image to sit at the top. What am I doing wrong???

 

[Foamcow]

Can you set the image to be the background of the DIV?

mydiv {
background: url(myImage.jpg) bottom right no-repeat;
}

Then set a margin or use padding to avoid other content going over the top of your image.

http://www.foamcow.com

 

[Halcrow]

I like your idea, but the image must also be a link. I'm setting up a thumbnail gallery and want to have descriptive text below each image, all in line, and the images sitting above the text so that the bottom of each image is in line (hope that makes sense). I'm not allowed to use tables either. (The images vary in height)

There must be a way!

 

[Foamcow]

Is this a school/college assignment?
Why can't you use a table? (I can't believe I said that)

http://www.foamcow.com

 

[Halcrow]

It's not an assignment - I'm new to the web developement world and inexperienced in coding. I'm setting up a web-site for someone who has some developement experience but no time! He wants me to avoid using tables wherever possible - feels that they are bad for presentation these days.

 

[Halcrow]

I can position the image horizontally using the "text-align" property. Is there no vertical alternative?

 

[ChrisHirst]

I can position the image horizontally using the "text-align" property.

Using the incorrect behaviour of IE please note. it will not work for strict browsers.


Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Halcrow]

how would align it for "strict" browsers?

 

[ChrisHirst]

use margin:auto

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Vragabond]

Actually that is not true. text-align: center will center all inline elements within the parent element. Text, input boxes, images, spans. Since image is by default an inline element, text-align should work on it in every browser.