How to Center a Fixed-width Element (not Text) Relative to Window?

[Ben Sharvy]

For instance, if a style-sheet is defined as

..maintext {width:35em; background-color:white;}
body {background-color:gray;}

And the HTML is:

<div class="maintext">

some text

</div>

How do I get everything in (the white box) div element to
automatically center itself in the (gray) browser window, regardless
of size of window, zoom setting, etc.? I've tried margin and padding
percentages, but nothing works.

[Nick Theodorakis]

On 28 Sep 2003 18:40:57 -0700, bs*****@mac.com (Ben Sharvy) wrote:

For instance, if a style-sheet is defined as

.maintext {width:35em; background-color:white;}
body {background-color:gray;}

And the HTML is:

<div class="maintext">

some text

</div>

How do I get everything in (the white box) div element to
automatically center itself in the (gray) browser window, regardless
of size of window, zoom setting, etc.? I've tried margin and padding
percentages, but nothing works.

Add this declaration to .maintext

margin: auto;

This will set allow a defined-width container to have equal left and
right margins, which will center it, at least in browsers that are
somewhat css-compliant.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[David Dorward]

Ben Sharvy wrote:

How do I get everything in (the white box) div element to
automatically center itself in the (gray) browser window, regardless
of size of window, zoom setting, etc.? I've tried margin and padding
percentages, but nothing works.

This should be simple, but MSIE has bugs, so it gets a little complicated.
http://dorward.me.uk/www/centre/ has the full story.

--
David Dorward http://dorward.me.uk/