<center> deprecated

Discussion in 'HTML' started by Jeroen, Mar 19, 2005.

  1. Jeroen

    Jeroen Guest

    The <center> element is not an element in html-4.01-strict,
    and 'align' is not an attribute of a <div>.
    The W3C states that I should use style="text-align: center",
    but that only works for text and not for block-elements.

    http://www.w3.org/TR/REC-html40/present/graphics.html#edef-CENTER

    What should I use instead of <center> ???

    --------------
    The old way:

    <body><center>
    Hello y'all<BR>
    <table style="width:400px; background-color:#DDDDDD">
    <tr><td>hello</td><td>y'all</td></tr>
    <tr><td>hello</td><td>y'all</td></tr>
    <tr><td>hello</td><td>y'all</td></tr>
    </table>
    </center></body>
    -------------

    -------------
    The new way proposed by W3C (the table isn't in the center):

    <body style="text-align: center">
    Hello y'all<BR>
    <table style="width:400px; background-color:#DDDDDD">
    <tr><td>hello</td><td>y'all</td></tr>
    <tr><td>hello</td><td>y'all</td></tr>
    <tr><td>hello</td><td>y'all</td></tr>
    </table>
    </body>
    -------------


    Greetings,

    Jeroen
    Jeroen, Mar 19, 2005
    #1
    1. Advertising

  2. Jeroen

    Steve Pugh Guest

    Jeroen <> wrote:

    >The <center> element is not an element in html-4.01-strict,
    >and 'align' is not an attribute of a <div>.
    >The W3C states that I should use style="text-align: center",
    >but that only works for text and not for block-elements.
    >
    >http://www.w3.org/TR/REC-html40/present/graphics.html#edef-CENTER
    >
    >What should I use instead of <center> ???


    For block level elements use
    margin-left: auto; margin-right: auto;
    For inline level contents of block use
    text-align: center;

    IE5 is a problem. It doesn't support auto margins. But it does
    incorrectly apply text-align to block level children.

    So
    body {text-align: center;}
    table {margin-left: auto; margin-right: auto; text-align: left;}
    Will center the table in IE5+ and browsers with goos CSS support.
    (The text-align: left; is to stop the contents of the table being
    centered within every cell.)

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Mar 19, 2005
    #2
    1. Advertising

  3. On Sat, 19 Mar 2005 16:00:45 GMT, Jeroen <> wrote:

    >
    >The <center> element is not an element in html-4.01-strict,
    >and 'align' is not an attribute of a <div>.
    >The W3C states that I should use style="text-align: center",
    >but that only works for text and not for block-elements.
    >
    >http://www.w3.org/TR/REC-html40/present/graphics.html#edef-CENTER
    >
    >What should I use instead of <center> ???



    I have a couple of pages I haven't plugged in awhile:

    <!--#include file="shameless.plug" -->

    Centering block elements:
    <http://theodorakis.net/blockcenter.html>

    Centering tables:
    <http://theodorakis.net/tablecentertest.html>

    They are a bit long-winded, and a little dated in discussing a couple
    of obsolete browsers, but I think you may find them useful. Also, pay
    attention to the difference in rendering for browsers that do doctype
    sniffing.

    Nick

    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
    Nick Theodorakis, Mar 19, 2005
    #3
  4. Jeroen

    Henry Guest

    Nick Theodorakis wrote:
    > On Sat, 19 Mar 2005 16:00:45 GMT, Jeroen <> wrote:
    >
    >
    >>The <center> element is not an element in html-4.01-strict,
    >>and 'align' is not an attribute of a <div>.
    >>The W3C states that I should use style="text-align: center",
    >>but that only works for text and not for block-elements.
    >>
    >>http://www.w3.org/TR/REC-html40/present/graphics.html#edef-CENTER
    >>
    >>What should I use instead of <center> ???

    >
    >
    >
    > I have a couple of pages I haven't plugged in awhile:
    >
    > <!--#include file="shameless.plug" -->
    >
    > Centering block elements:
    > <http://theodorakis.net/blockcenter.html>
    >
    > Centering tables:
    > <http://theodorakis.net/tablecentertest.html>
    >
    > They are a bit long-winded, and a little dated in discussing a couple
    > of obsolete browsers, but I think you may find them useful. Also, pay
    > attention to the difference in rendering for browsers that do doctype
    > sniffing.
    >
    > Nick
    >



    All of this crap because <center> is deprecated.


    Just remind me, what was wrong with <center> in the first please!

    Why it have to be replaced by some not very intuitive crap?


    KISS is the key!

    ALWAYS...
    Henry, Mar 19, 2005
    #4
  5. Henry wrote:
    > Just remind me, what was wrong with <center> in the first please!
    >
    > Why it have to be replaced by some not very intuitive crap?


    What's unintuitive about text-align:center for text? What's unintuitive
    about putting margin:auto on block-level elements?

    > KISS is the key!
    >
    > ALWAYS...


    Right. The center element wasn't very simple.
    Leif K-Brooks, Mar 20, 2005
    #5
  6. On Sun, 20 Mar 2005 07:58:39 +0800, Henry <>
    wrote:


    [...]

    >
    >Just remind me, what was wrong with <center> in the first please!
    >


    Answer this: how should table cell *contents* be aligned if the table
    is surrounded by <center>? Should they be left aligned or center
    aligned?

    >Why it have to be replaced by some not very intuitive crap?
    >


    There is actually nothing intuitive about the behavior of <center>. It
    acts variously as an inline-alignment or sometimes as a block-level
    alignment, depending on browser idiosycracies. I don't think even the
    original specification was clear.

    Nick
    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
    Nick Theodorakis, Mar 20, 2005
    #6
  7. Jeroen

    Toby Inkster Guest

    Henry wrote:

    > Just remind me, what was wrong with <center> in the first please!
    > Why it have to be replaced by some not very intuitive crap?


    As the others have said, CENTER was never an intuitive element.

    Example:

    <center>
    Is this centred?
    <table width="100%"><tr><td>Is this?</td></tr></table>
    <p>Is this?</p>
    </center>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 20, 2005
    #7
  8. Nick Theodorakis wrote:
    > There is actually nothing intuitive about the behavior of <center>. It
    > acts variously as an inline-alignment or sometimes as a block-level
    > alignment, depending on browser idiosycracies. I don't think even the
    > original specification was clear.


    The original specification by Netscape
    (http://wp.netscape.com/assist/net_sites/html_extensions.html) was
    perfectly clear: <CENTER> was for centering text, and presumably would
    have no effect on block-level elements.

    Sadly, the HTML 4.01 standard
    (http://www.w3.org/TR/html4/present/graphics.html#h-15.1.2) is more
    confused on the subject. First, it says that the align attribute
    "align block elements [...] on the canvas"; later on, when discussing
    the possible values for the attribute, it talks about "text lines". The
    examples section says that the align attribute is equivalent to
    text-align in CSS; unfortunately, the author doesn't seem to be very
    knowledgeable about CSS, because a CSS example in the same section
    claims that setting text-align:center on the body element would "center
    the entire document".
    Leif K-Brooks, Mar 20, 2005
    #8
  9. Jeroen

    Jens Lenge Guest

    "Steve Pugh" <> wrote:

    > For block level elements use
    > margin-left: auto; margin-right: auto;
    > For inline level contents of block use
    > text-align: center;


    That makes me curious:
    I have learned that I should generally prefer CSS formatting over HTML
    formatting.
    So when it comes to tables, should I consequently always use <table
    style="margin:auto"> instead of <table align="center"> for centered
    formatting?

    Jens
    Jens Lenge, Mar 20, 2005
    #9
  10. Jeroen

    Henry Guest

    Toby Inkster wrote:
    > Henry wrote:
    >
    >
    >>Just remind me, what was wrong with <center> in the first please!
    >>Why it have to be replaced by some not very intuitive crap?

    >
    >
    > As the others have said, CENTER was never an intuitive element.
    >
    > Example:
    >
    > <center>
    > Is this centred?
    > <table width="100%"><tr><td>Is this?</td></tr></table>
    > <p>Is this?</p>
    > </center>
    >




    <center>
    Is this centred?
    <table width="100%"><tr><td>Is this?<center>But this is centred
    </center></td></tr></table>
    <p>Is this? As well</p>
    </center>


    Also td could be centered separately.

    Still new solution is creating more problems than old <center>.

    Just a brief look on questions on this ng and there is a flood of them,
    asking how to center this or that in css.

    Centering anything in css seems to be a nightmare for beginners.

    So many pages on the web trying to explain how to center anything.

    If that margin: auto; and that text-align: center; would do the job, we
    would not need all these articles and there would be not a nightmare on
    this ng.

    No wonder that MS feels that css2 has certain flaws and they are not
    implementing it fully in next explorer.

    I'm not the best friend of MS. Just in case. ;)



    Cheers...
    Henry, Mar 21, 2005
    #10
  11. Jeroen

    DU Guest

    Henry wrote:

    > Toby Inkster wrote:
    >
    >> Henry wrote:
    >>
    >>
    >>> Just remind me, what was wrong with <center> in the first please!
    >>> Why it have to be replaced by some not very intuitive crap?

    >>
    >>
    >>
    >> As the others have said, CENTER was never an intuitive element.
    >>
    >> Example:
    >>
    >> <center>
    >> Is this centred?
    >> <table width="100%"><tr><td>Is this?</td></tr></table>
    >> <p>Is this?</p>
    >> </center>
    >>

    >
    >
    >
    > <center>
    > Is this centred?
    > <table width="100%"><tr><td>Is this?<center>But this is centred
    > </center></td></tr></table>
    > <p>Is this? As well</p>
    > </center>
    >
    >
    > Also td could be centered separately.
    >


    Your <center> element does not make any distinction. Sometimes, <center>
    will center an element within its parent, sometimes, <center> will align
    the text nodes and inline elements.

    > Still new solution is creating more problems than old <center>.
    >


    HTML was never designed to be a layout language, a formating language.
    HTML is supposed to be media-independent. So offloading <center> from
    HTML to CSS makes sense.

    > Just a brief look on questions on this ng and there is a flood of them,
    > asking how to center this or that in css.
    >
    > Centering anything in css seems to be a nightmare for beginners.
    >
    > So many pages on the web trying to explain how to center anything.
    >


    And some fail too. They explain with deprecated markup code how to do
    this. They give explanations for nonstandard methods. How about telling
    those readers to upgrade their browsers (away from NS 4, MSIE 4, MSIE
    5.x) and explain them how to center the right way, the correct way
    inline and/or block level elements?

    > If that margin: auto; and that text-align: center; would do the job,


    These declarations do distinct and distinguishable jobs. One will center
    inline elements within its container while the other will center a
    block-level element within its parent.

    we
    > would not need all these articles and there would be not a nightmare on
    > this ng.
    >


    The nightmare first started with browser war, then with browser
    manufacturers creating bugs and not fixing them and then finally with
    people writing articles on how to use nonstandard and deprecated
    elements and attributes to support deprecated browsers, buggy browsers.

    > No wonder that MS feels that css2 has certain flaws and they are not
    > implementing it fully in next explorer.
    >


    Obviously, that is not what Chris Wilson, lead program manager for the
    web platform in IE, said: "We know we have a lot more work to do in
    addressing our consistency issues with CSS and furthering our coverage
    of these standards. Expect to see more detail on our plans in IE7 in
    the future."


    > I'm not the best friend of MS. Just in case. ;)
    >
    >
    >
    > Cheers...
    >


    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 21, 2005
    #11
  12. Jeroen

    DU Guest

    Henry wrote:


    > Centering anything in css seems to be a nightmare for beginners.
    >
    > So many pages on the web trying to explain how to center anything.
    >
    > If that margin: auto; and that text-align: center; would do the job, we
    > would not need all these articles and there would be not a nightmare on
    > this ng.
    >
    > No wonder that MS feels that css2 has certain flaws and they are not
    > implementing it fully in next explorer.
    >


    CSS1 says:
    "[text-align property] describes how text [or inline content] is aligned
    within the element."
    http://www.w3.org/TR/REC-CSS1#text-align

    CSS1 says:
    "if both 'margin-left' and 'margin-right' are 'auto', they will be set
    to equal values. This will center the element inside its parent."
    http://www.w3.org/TR/REC-CSS1#horizontal-formatting

    And MSIE 6 in standards compliant rendering mode will honor such CSS
    declarations without a flaw.

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 21, 2005
    #12
  13. On Mon, 21 Mar 2005 08:02:39 +0800, Henry <> wrote:


    [...]

    >Centering anything in css seems to be a nightmare for beginners.
    >


    That was true in the days when bugs in popular browsers made
    implementation difficult (and the pages I referenced were originally
    written when the dominant browser was IE5 and NS4 still had a strong
    following). Nowadays, virtually all popular browsers in common use
    (IE6, Mozilla, Fire&animal; Opera, and Safari) understand how to
    horizontally center content using CSS: for blocks make the margins
    equal, and for inline content use text-align. Moreover, common
    browsers are inconsistent in their rendering of <center>. Thus there
    is no longer any excuse to use <center> in preference to CSS.

    Nick

    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
    Nick Theodorakis, Mar 21, 2005
    #13
  14. Jeroen

    Toby Inkster Guest

    Henry wrote:

    > Centering anything in css seems to be a nightmare for beginners.


    In strict mode, it's easy as pie.

    <style type="text/css">
    DIV {
    width: 50%;
    border: 1px solid black;
    }
    </style>

    <div style="text-align:center">
    This text is centred, but the containing box is not.
    </div>

    <div style="margin:auto">
    This box is centred, but the text within is not.
    </div>

    <div style="margin:auto;text-align:center">
    This box is centred, and the text within it it centred too.
    </div>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 21, 2005
    #14
  15. Jeroen

    dorayme Guest

    > From: Toby Inkster <>
    > Newsgroups: alt.html
    > Date: Mon, 21 Mar 2005 08:11:51 +0000
    > Subject: Re: <center> deprecated
    >
    > Henry wrote:
    >
    >> Centering anything in css seems to be a nightmare for beginners.

    >
    > In strict mode, it's easy as pie.
    >
    > <style type="text/css">
    > DIV {
    > width: 50%;
    > border: 1px solid black;
    > }
    > </style>
    >
    > <div style="text-align:center">
    > This text is centred, but the containing box is not.
    > </div>
    >
    > <div style="margin:auto">
    > This box is centred, but the text within is not.
    > </div>
    >
    > <div style="margin:auto;text-align:center">
    > This box is centred, and the text within it it centred too.
    > </div>
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me ~ http://tobyinkster.co.uk/contact
    >



    yes, nicely put Toby. I notice that in my mac IE 5.1.6, I have to put <td
    style="text-align:center"> to make the text middle in a table unlike in mac
    Mozilla 1.3 where your style as on div on <table> is sufficient. An
    observation in case anyone is wanting to now and then use tables (for
    tabular data say), it may also need to be done for some PC browsers...

    dorayme
    dorayme, Mar 21, 2005
    #15
  16. Jeroen

    Henry Guest

    Toby Inkster wrote:


    U r champion as always!

    Thanx...
    Henry, Mar 22, 2005
    #16
  17. Jeroen

    Csaba2000 Guest

    "Toby Inkster" <> wrote in message news:p...
    > In strict mode, it's easy as pie.
    >
    > <style type="text/css">
    > DIV {
    > width: 50%;
    > border: 1px solid black;
    > }
    > </style>
    >
    > <div style="text-align:center">
    > This text is centred, but the containing box is not.
    > </div>
    >
    > <div style="margin:auto">
    > This box is centred, but the text within is not.
    > </div>
    >
    > <div style="margin:auto;text-align:center">
    > This box is centred, and the text within it it centred too.
    > </div>


    That was a nice example. I modified it slightly so that a right
    aligned div is in there, too. Interesting effect, but maybe you
    could make it a little cleaner...

    <body style="margin:0">
    <style type="text/css">
    DIV { width: 50%; border: 1px solid black; }
    </style>

    <div style="text-align:center">
    This text is centred, but the containing box is not.
    </div>

    <div style="float:right">
    This box is right aligned, but the text within is not.
    </div>

    <div style="margin:auto;text-align:right">
    This box is centred, and the text within it it right aligned.
    </div>
    </body>

    Csaba Gabor from Vienna
    Csaba2000, Mar 23, 2005
    #17
  18. Csaba2000 wrote:
    > That was a nice example. I modified it slightly so that a right
    > aligned div is in there, too. Interesting effect, but maybe you
    > could make it a little cleaner...
    >
    > <div style="float:right">


    Try using margin-left:auto instead.
    Leif K-Brooks, Mar 24, 2005
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Barney Barumba
    Replies:
    0
    Views:
    550
    Barney Barumba
    Jul 23, 2003
  2. david
    Replies:
    4
    Views:
    6,299
    david
    Oct 9, 2003
  3. David McDivitt

    deprecated getResources method

    David McDivitt, May 18, 2004, in forum: Java
    Replies:
    2
    Views:
    1,862
    David McDivitt
    May 19, 2004
  4. Bernd Oninger
    Replies:
    1
    Views:
    402
    GIMME
    Jun 10, 2004
  5. kaeli
    Replies:
    3
    Views:
    4,875
    Eric Sosman
    Aug 24, 2004
Loading...

Share This Page