Friday, December 7, 2007

Vertical Alignment/CSS

Apparently there are a lot of people who have solved this issue out there, but I thought I would post my solution (which is just a variation of someone else's).

If you want to vertically align something in the middle of a browser window, the CSS can be a little challenging. I did it by putting the element to be aligned vertically into the page with a defined height, absolute position, and negative margins to compensate for half the height of the centered object. One article advised putting all of this within a relatively positioned element set to 100% height, but in my trials this was unnecessary. I am also centering horizontally here, partially using the same technique due to the fact that this elements is now absolutely positioned. Example.

Labels: ,