I'm just starting a new site which is going to have a fairly compact
home page, and decided that rather than the content being a box with
whitespace on 3 sides but touching the top of the viewport, it would
be nice if it was centered (provided it is shorter than the viewport).
Looking though the wiki, all the linked methods for vertical centering
(basically position:absolute; top:50%, margin-top:-foo ) require an
element of fixed height. I don't want to lock down the font-size so
the height will be unknown.
As an alternative I thought I would try display:table-cell (since this
is only a cosmetic tweak and the fallback should be to display at the
top
When I tried this:
div#globalwrapper {display:table-cell; width: 40em;
vertical-align:middle; margin-left:auto;margin-right:auto;} it not
only failed to vertically center, it aligned the div at the left of
the window.
Does anyone have a working example of this approach?
Richard (wearing hat 1 today)
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
