- From: Bert Bos <Bert.Bos@sophia.inria.fr>
- Date: Mon, 20 Oct 1997 12:00:45 +0200 (MET DST)
- To: neil@bigpic.com
- Cc: www-style@w3.org
Neil St.Laurent writes:
> Maybe I'm missing something, but it just dawned on me after several
> months of implementing and using CSS that there doesn't appear to be
> a way to center or right align block-level elements.
>
> Basically I want this HTML 3.2 code:
>
> <DIV ALIGN=CENTER>
> <TABLE> ... </TABLE>
> </DIV>
>
> converted into HTML 4.0 using CSS:
>
> <DIV STYLE="????: center">
> <TABLE> ... </TABLE>
> </DIV>
Centering or right-aligning block-level elements can be done by
setting the appropriate margins to 'auto', and setting 'width' to
something fixed. CSS1 doesn't define how the width of tables is
computed (that will be in CSS2), but we can assume it works somewhat
like an image: i.e., by default the table width is determined by its
contents.
To center the table above:
<DIV>
<TABLE STYLE="margin-left: auto; margin-right: auto">
...
</TABLE>
</DIV>
You cannot set it on the DIV, unless you know already what the width
of the table will be; the width of the DIV is not dependent on the
width of the table.
Another way is to make TABLE an inline element, and use 'text-align':
<DIV STYLE="text-align: center">
<TABLE STYLE="display: inline">
...
</TABLE>
</DIV>
Bert
--
Bert Bos ( W 3 C ) http://www.w3.org/
http://www.w3.org/pub/WWW/People/Bos/ INRIA/W3C
bert@w3.org 2004 Rt des Lucioles / BP 93
+33 4 93 65 77 71 06902 Sophia Antipolis Cedex, France
Received on Monday, 20 October 1997 06:01:17 UTC