Baseline shift in css...

[Messiah Khan]

without using tables? Is it possible? Im trying to vertically centre an image in a dynamically sized div. vertical_align:middle; doesn't seem to work (Think it needs to be on a table?) So ive used lineheight instead. This works nicely, but due to the image being quite tall, you can tell that the image is sitting on the line, moving it up a bit. So how do I shift the baseline down to compensate for the height of the image using CSS with the code being strict valid?

 

[ringo747]

Maybe i'm on the wrong lines here but can you just not add padding to the div to ensure that image doesn't sit on the line? Sorry if im misunderstanding your question.

Vertical alignment of images is quite messy at times. What would happen if you used relative positioning within the div and set a percentage value i.e. top:25% - would this work?

 

[Bakedgoods]

padding-top?

 

[Messiah Khan]

Maybe i'm on the wrong lines here but can you just not add padding to the div to ensure that image doesn't sit on the line? Sorry if im misunderstanding your question.

Vertical alignment of images is quite messy at times. What would happen if you used relative positioning within the div and set a percentage value i.e. top:25% - would this work?

Unfortunately I can't use relative positioning as I need the positioning to be absolute as the image sits over another image. I can achieve the same effect with position:absolute; bottom:50%; But I still have the problem of not being able to define a vertical shift of 50% of the height of the image.

padding-top?

Ive tried this, but it doesn't seem to have any effect. Does it work with the div being position:absolute?

http://www.afowler.co.uk/gallery/index.php?showimage=44&category=4
Is the site im working on. When you hover over the image, you can see a next and previous button hover over the sides of the image (Ignore the white background thats just for testing) I basically need them to be central no matter what the dimensions of the image.

 

[BigglesPiP]

Vertical align doesn't work.

Use line height.

 

[Messiah Khan]

Vertical align doesn't work.

Use line height.

vertical_align:middle; doesn't seem to work.. So ive used lineheight instead.. but due to the image being quite tall, you can tell that the image is sitting on the line, moving it up a bit

 

[BigglesPiP]

Lol, oops.

I'm not quite sure what you mean, can I see the site?

 

[Messiah Khan]

Lol, oops.

I'm not quite sure what you mean, can I see the site?

http://www.afowler.co.uk/gallery/index.php?showimage=67

Edit; i recon it might be possible doing it with javascript in some form or other.

 

[BigglesPiP]

Negative padding?

Why do you need position: absolute; ?

 

[Messiah Khan]

Negative padding?

Why do you need position: absolute; ?

Negative padding isn't css 2.1 valid. As far as I know I need the position: absolute; in order to position the hover over navbar over the image. Unless there is another way of doing it that I don't know about.

 

[Dj_Jestar]

z-index and negative margins, or negative top/bottom/left/right

 

[BigglesPiP]

I would say you're going to have to sacrifice the dynamic height.

There are certain things in CSS 2.1 which you just have to do with fixed dimensions (rounded corners with transparency springs to mind, although that only has to be fixed in one axis).

I really hope the dynamic dimensions are revamped in CSS3, I would dearly love to be able to go "10%+15px" too.

 

[TwoSaints]

Centred non-repeating background image will save the day here I think

 

[Messiah Khan]

Centred non-repeating background image will save the day here I think

Jonny saves the day again! Must be about 2 packets of cookies I owe you now.