- From: J. David Bryan <jdbryan@acm.org>
- Date: Mon, 12 Feb 2001 23:11:23 -0500
- To: HTML Tidy List <html-tidy@w3.org>
On 12 Feb 2001, at 17:26, Mark Renouf wrote:
> I orginally had a <div align="center"> around the whole
> page so that the 400px block would sit centered on the page, with
> the text wrapped within it, left aligned, and the banner centered.
>
> How do I accomplish this without using the align attribute?
The correct CSS method is to use:
margin-left: auto; margin-right: auto
...on your DIV, i.e.:
<div style="margin-left: auto; margin-right: auto; width: 400px; ...>
From the CSS1 spec, section 4.1.2 (Horizontal Formatting):
"...If both 'margin-left' and 'margin-right' are 'auto', they will be
set to equal values. This will center the element inside its parent."
That works correctly on Opera 5 and Netscape 6. It fails in IE 5 and
Netscape 4 due to browser bugs. A workaround for these is to enclose your
existing DIV with another DIV and put the text-align on that one, i.e.:
<div style="text-align: center">
<div style="width: 400px; ...>
...
</div>
</div>
But this is ignored in Opera 5 and Netscape 6, as it should (the CSS spec
says that text-align "...describes how inline content of a block is
aligned" -- note the restriction to *inline* content). Combining the two
methods will work in all four listed browsers.
(This is a bit off-topic for the HTML Tidy list; excellent advice for CSS
is available on the "comp.infosystems.www.authoring.stylesheets" USENET
newsgroup.)
-- Dave
Received on Monday, 12 February 2001 23:11:36 UTC