Vertical centering

[wonshikee]

How can I vertically center?

I have a div with a fixed width and height of 290px and a slight grey background.

I am placing a slide show images in there, but I want it centered both x and y so that smaller images show up in the middle.

Any way to do this effectively?

[Tailslide]

Doing this isn't as easy as you might think. There are a couple of solutions (obviously the horizontal centering isn't a problem).

1. Using negative margins and absolute positioning: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
2. Using Javascript: http://www.alistapart.com/d/footers/...ariation1.html

Personally when I've done this in the past I've used the javascript option because it struck me as less messy. Plus with Javascript off, the div just reverts to "normal" behaviour so I felt it was unobtrusive. I suppose it does however impinge slightly on the whole presentation=CSS / behaviour=Javascript thing.

[Paul O'B]

How can I vertically center?

Read the FAQ as it is explained in detail there .

Personally when I've done this in the past I've used the javascript option

I have some examples here that will center anything with known or unknown heights:

http://www.pmob.co.uk/pob/vertical-center1.htm

[Tailslide]

Yep that works nicely - but there seems to be 3 divs there and outer, container and inner - are they all required to get that approach to work as it's a fair bit of extra markup.

[wonshikee]

Thank you both, I have decided to use javascript, since afterall it is a slide show, so i am guaranteed to have javascript on, which to me seems more reliable than the various CSS interpretations.

I did run into a problem, and although this is a javascript question its in the same topic so i'll here..

		alert(document.getElementById('current-img').offsetHeight);
		document.getElementById('current-img').src = img[i];
		alert(document.getElementById('current-img').offsetHeight);

This is how I was swapping out the images, afte rthe fade in and fade out, but both above and below the image swap, it returns the same offset data, which is causing the javascript to not center properly. How do I solve this issue? The bottom alert should update to the newest image no?

[achtungbaby]

Thank you both, I have decided to use javascript, since afterall it is a slide show, so i am guaranteed to have javascript on, which to me seems more reliable than the various CSS interpretations.

I did run into a problem, and although this is a javascript question its in the same topic so i'll here..

		alert(document.getElementById('current-img').offsetHeight);
		document.getElementById('current-img').src = img[i];
		alert(document.getElementById('current-img').offsetHeight);

This is how I was swapping out the images, afte rthe fade in and fade out, but both above and below the image swap, it returns the same offset data, which is causing the javascript to not center properly. How do I solve this issue? The bottom alert should update to the newest image no?

If your images are inline, have you tried setting the line-height of your div to 290px?

[wonshikee]

If your images are inline, have you tried setting the line-height of your div to 290px?

Yes I tried this, this didn't work for me in both FF and IE6

[Paul O'B]

I did run into a problem, and although this is a javascript question its in the same topic so i'll here..

If you'd used my method I would have an answer for you but as this is now a javascript question I will move the thread to the appropriate forum now