I have a CSS-based webpage where I’d like the content centred horizontally and vertically. Horizontal is easy. Vertical is proving tricky, particularly because I’d like the content to be centred in whatever browser window size the viewer has.
I’d like to steer clear of a traditional TABLE layout or JavaScript; how else can I get content centred vertically in IE, Opera, Netscape, Mozilla (etc)?
I don’t know. But is this the type of thing you’re looking for?
Problem: it doesn’t display correctly in IE because IE doesn’t support some CSS tag. There might be a way around that though…have a look through their site (nice stuff).
Not quite - it’s more that I have a simple box of content (defined using DIV tags) that I want to appear centred regardless of browser window size. Seems simple in theory, but apparently very difficult in practice.
if you have a simple box of content then its relatively easy to do - all you have to do is work out what size (percentage-wise) your simple box is going to be.
For arguments sake lets say your box is going to take up 20% of the screen - all you need to do is create a layer and make it position: absolute; top: 40%.
Cheers all! I forgot about “absolute”; maybe that’s what I need.
Erislover: using table tags for presentational markup isn’t really the point of (I think) XHTML/CSS2, so it’s more of a challenge to myself, really. No good reason beyond that.
The “vertical-align” property only works with table cells. I’m not sure what for what reason this is so, but even the most recent builds of Mozilla don’t attempt to correct this, so presumably, there’s a good one.
for anyone interested in the “why not tables - why use css?” arguement, its worth taking a look at the alistapart article titled “To hell with bad browsers” which can be found here:
and its follow-up article - “A Web Designers Journey”