valign

[l_brook]

Hi,

I have been having a few problems trying to get a <div>, <table> or whatever to appear in the middle of the screen, i.e. centrally aligned AND vertically aligned in the middle.

My initial thoughts were to make a table of 100% height (using CSS since this is invalid HTML) and making a <td> with 'valign=middle', but that method does not work with Firefox.

I have been searching for some CSS properties which can let me do this esaily but there don't seem to be any. I understand it is fairly bad practise to want to put content in the middle of a page vertically but what the client wants, the client wants...

I have experimented with percentages in margins on <div>s etc. but with no consistent results.

Any help in the matter would be greatly appreciated.

Thanks,
Louis

[chump2877]

Use DHTML layers and relative positioning inside the browser window to keep the layer in the center...most, good HTML editors can create these for you (like Dreamweaver, for instance)...Do a search on "DHTML layers relative positioning" and see if that points you in the right direction....

[ronaldb66]

There aren't many ways to achieve this that are consistent, practical and flexible, and for a good reason.
Basically, the content determines how much room you need on a page to fit it all; when the width is set -either in relation to the viewport's width, or a set value- leaves the height as the only variable.
Unless the content is fixed in size and its dimensions are known, it is unpractical to take this variability out of the height dimensions.

Vertical centering also is counter-intuitive; in the western world, people are used to scanning a page left-to-right, top-to-bottom; with a vertically centered page, they first have to find where the content actually begins before they can begin scanning.
This is aggrevated when the page is small; on the other hand, when the page is larger and the height exceeds the viewport height, vertical scrolling is necessary afterall.

I guess you'll have to try harder to convince your client that this centering ploy is a lousy idea; afterall, protecting clients against their own ignorance and outdated views on web sites can be considered part of the designer's job, too... ;)

[rmedek]

First off, using a table and a td to center a layout isn't necessarily "invalid HTML," but it a bad practice in most eyes and not recommended due to the lack of semantics. Assuming you have a fixed width and height (let's say 600px by 500px) you could do this:

CSS:

#container {
position: absolute;
top: 50%;
left: 50%;
margin-top:-250px;
margin-left: -300px;
width: 600px;
height: 500px;
}

HTML:

<div id="container">centered horizontally and vertically</div>

You're essentially moving the top-left corner of the div to the absolute center of the window and adjusting the margins to center it. The negative margins play havoc with some older browsers but that might not be a problem for you.

If you just want to center a div horizontally use:

margin: 0 auto

Hope this helps,

[l_brook]

Thanks rmedek, that's exactly what I was trying to come up with. Unorthadox but should work perfectly, thanks. [the invalid html comment was in referrence to tables having height attribute btw]

ronaldb66, I agree totally with what you are saying and don't like the idea at all. The content is fixed in that there is a scrolling div but it's still not especially great having it in the middle of the screen. He ideally wants something small and flash-like but since I don't know how to do any server-side stuff with flash easily, that's a no go...

Cheers all,
Louis