<center> deprecated

J

Jeroen

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
 
S

Steve Pugh

Jeroen said:
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> ???
Click to expand...

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
 
N

Nick Theodorakis

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> ???
Click to expand...


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
 
H

Henry

Nick said:
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
Click to expand...


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...
 
L

Leif K-Brooks

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

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

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...
Click to expand...

Right. The center element wasn't very simple.
 
N

Nick Theodorakis

[...]
Just remind me, what was wrong with <center> in the first please!
Click to expand...

Answer this: how should table cell *contents* be aligned if the table
Why it have to be replaced by some not very intuitive crap?
Click to expand...

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
 
T

Toby Inkster

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

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>
 
L

Leif K-Brooks

Nick said:
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.
Click to expand...

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".
 
J

Jens Lenge

Steve Pugh said:
For block level elements use
margin-left: auto; margin-right: auto;
For inline level contents of block use
text-align: center;
Click to expand...

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
 
H

Henry

Toby said:
Henry wrote:




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>
Click to expand...



<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...
 
D

DU

Henry said:
<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.
Click to expand...

Your <center> element does not make any distinction. Sometimes, <center>
Still new solution is creating more problems than old <center>.
Click to expand...

HTML was never designed to be a layout language, a formating language.
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.
Click to expand...

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,
Click to expand...

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.
Click to expand...

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.
Click to expand...

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...
Click to expand...

DU
 
D

DU

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.
Click to expand...

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
 
N

Nick Theodorakis

[...]
Centering anything in css seems to be a nightmare for beginners.
Click to expand...

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
 
T

Toby Inkster

Henry said:
Centering anything in css seems to be a nightmare for beginners.
Click to expand...

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>
 
D

dorayme

From: Toby Inkster said:
Newsgroups: alt.html
Date: Mon, 21 Mar 2005 08:11:51 +0000
Subject: Re: <center> deprecated


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>
Click to expand...


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
 
C

Csaba2000

Toby Inkster said:
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>
Click to expand...

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
 
L

Leif K-Brooks

Csaba2000 said:
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">
Click to expand...

Try using margin-left:auto instead.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Can anyone please help? HTML - two tables applying different styles 4
How to wrap <td> content . 16
Having trouble centering contents of td ? 3
Javascript DOM 1
Help needed with thank you message 5
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 20 (members: 2, guests: 18)
Robots: 311

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top