W3C home > Mailing lists > Public > www-style@w3.org > October 1997

Re: With CSS how does one ALIGN block-level elements?

From: Bert Bos <Bert.Bos@sophia.inria.fr>
Date: Mon, 20 Oct 1997 12:00:45 +0200 (MET DST)
Message-Id: <199710201000.MAA22040@mygale.inria.fr>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:53:51 GMT