Topic: Vertical Centering

Is it possible to verticly center something (preferable a div or an image) easily? It seems like it would be used a lot but I just don't know how.

SB: I was going to say that I'd tried and I didn't think it was possible (as I've said this before) although you would think that margin-top: auto; margin-bottom: auto; would do the trick. However, I did a little nosing around and there is a trick to make it work:
www.damowmow.com/mozilla/demos/centring

However, I can't get this to work in IE5/Win2k but it may work in more recent versions of IE. Otherwise its probably not worth looking at. I'll have another look around and see what I can find.

Emps


A good buttock will always find a bench for itself - Estonian proverb

Didn't work in the latest my IE either. My old hompage use to have a verticle centering jscript but it was slow and you had to wait for all the images to load to boot.

Bugimus made this script for CPrompt. You may find it interesting.

The thread was: http://www.ozoneasylum.com/Forum2/HTML/001368.html

Verticle centering with Javascript isn't slow at all. Not if it's done right.

The link to bugs' script that MissTerry posted works well. Althought that won't work in Opera as it doesnt support the onResize() method. There is a way around this however the explanation is a little lengthy and best left to the DHTML/Javascript forum.

As for the images loading before the JS will center it.... Well I don't think there's a way around that. I was doing a similar thing once and encountered the same problem. I ended up putting in a preloader to cover it as nothing else I tried worked. However, once it's loaded and for non image elements it's lighting fast.

Sadly you can't even fake it with relative margin or padding values as theise % values are relative to the width of the page regardless of the value like so:

If we are given a page at this size:
Page Height = 200px
Page Width = 500px

The following:
margin-top: 10%; margin-left: 10%

Would actually be:
margin-top: 50px; margin-left: 50px

Not 20px & 50px as one would expect. Which is just outright poo if you ask me.

Yes that script that Bugs did for me works great.

However, I have been playing around with it for one reason. The page that I was going to use this on has a table that is 750px wide and I wanted it centered vertically as well as horizontally.

The problem is that for some reason when the position:absolute; left:0px is taken out the whole thing crashes on me. And as Draciuss said it doesn't work at all in Opera. I HATE OPERA! :mad

I will post a page as soon as I get my problems with it worked out.

Later,
C:\


~Binary is best~

Has anyone tried Bugs' script on a page with the XHTML 1.0 DTD? I get the centered content at the top of the screen, with only the bottom half showing. If I remove the DTD to test, it works fine.

Did you try putting the script in an external .js file?