37083 - [BLOCK-H]CENTER element doesn't work on block elements

Status: VERIFIED FIXED

(Core :: Layout, defect, P2)

Description

[Keith Lesch]

It makes sense that a normal DIV would not need to be centered.  However I have 
not been able to figure how to center a DIV that is only 50% wide.  Testcase is 
coming.

Comment 1

[Keith Lesch]

Attachment: Two testcases that do not center a DIV

Comment 2

[Hugh Kennedy]

confirming using M15 on WinNT (build id: 2000041805).

ie 5.x centers the divs as intended.

bug 23116 and bug 36022 may be related
(they both refer to centering inline tables)

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It may be that the CENTER element should center the DIV.  However, text-align:
center should not.

Comment 4

[Hugh Kennedy]

er, okay. but given that <center> is not legal html4 and the align attribute is
deprecated, how should one deal with <div> centering via css?

(i plead total ignorance on this one :-)

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

To center a div with class ctr:

div.ctr { margin-left: auto; margin-right: auto; }

Comment 6

[Keith Lesch]

Which one of those (or both?) margin settings are not "auto" automatically to 
begin with?  Had to use that word twice in a sentence...

According to the specs (link below), it looks to me like if the DIV is set to 
display:block; then it should center with text-align:center;.  Let me know what 
you think...  (Not to mention that although what you mentioned here works for 
centering, I don't think it is what the average developer would come up with as 
a solution :-)

http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

> Which one of those (or both?) margin settings are not "auto" automatically to 
> begin with?  Had to use that word twice in a sentence...

Neither.  However, if box properties are overconstrained (i.e., neither margin
nor width is auto), then margin-right is ignored.  This happens when width is
set to some non-auto value.

> According to the specs (link below), it looks to me like if the DIV is set to 
> display:block; then it should center with text-align:center;.  Let me know
> what you think...  (Not to mention that although what you mentioned here works
> for centering, I don't think it is what the average developer would come up
> with as a solution :-)

What in the specs makes you think that?  The part you cite very clearly says the
opposite - that only the line boxes should be centered.  Section 10.3.3 defines
when a block *should* be centered.

Comment 8

[Keith Lesch]

Okay, that was a mis-read on my part.  Sorry, I looked at it again and I 
understand.  So does anything need to get changed here or do I just need to 
remember this is how to center a DIV?

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It may be that the way the CENTER element works should be changed a bit.  I'm
not sure...

Comment 10

[Pierre Saslawsky]

Changed the title to "CENTER doesn't work on block elements" from "Cannot center 
a DIV that is a limited width". Reassigned to buster.

Comment 11

[Pierre Saslawsky]

Attachment: testcase

Comment 12

[Hixie (not reading bugmail)]

(Note that the width:50% on the SPAN and STRONG elements in that test case are
correctly ignored by Mozilla.)

Comment 13

[buster]

discussed with Marc, he'll take a look at mapping auto-margins into the style 
context of immediate children of the <CENTER> as a possible remedy.

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Might an easier solution be to make blocks respect -moz-center (which I think is
a value of text-align)?  This would also work for descendants that are not
children.  (I think -moz-center works correctly on tables these days...)

Comment 15

[Marc Attinasi]

Looking into what is happening...

Comment 16

[Marc Attinasi]

Interesting statement in the HTML 4.01 spec:

"The CENTER element is exactly equivalent to specifying the DIV element with the 
align attribute set to "center". The CENTER element is deprecated."

So, I created a testcase that does the substitution and it shows that we are not 
centering the DIV. This might be a more general problem than the <center< tag.

Comment 17

[Marc Attinasi]

Attachment: Comparson of <center> and <div align=center>

Comment 18

[Marc Attinasi]

I tried mapping <center> (and align=center on a DIV) to auto-margins and it is 
not the correct solution. Here's why: margins are not inherited so we don;t 
center all of the contexts of the <center> block (or all of the contexnts of a 
div with align=center). It looks like layout really does need to honor the 
text-align property, at least for values NS_STYLE_TEXT_ALIGN_MOZ_CENTER and 
NS_STYLE_TEXT_ALIGN_MOZ_RIGHT.

This also seems to be a pretty important bug: not being able to center blocks 
using the <center> tag, and not being able to center a div using the 
align=center attribute seems like it will break a lot of pages, no?

This bug should probably go back to Layout... 

Comment 19

[Marc Attinasi]

Steve, sorry to say but it looks like we are going to need to honor -moz-center 
in block frames: that will get the <center> problem fixed and will also fix the 
related problem where <DIV align=center> is not being centered. Please see my 
comments on why auto-margins is not a viable solution here...

I know you don't have enough to do these day anyway, so this bug should be 
welcome ;)

Comment 20

[ekrock's old account (dead)]

Nom. nsbeta2, recc. nsbeta2+, falling through to nsbeta3 hard stop if not fixed 
during nsbeta2. Centering of block elements is a widely used text effect on the 
web, and we need to enable this do be done. This is b.c. with widely-used html32 
tags.

Comment 21

[leger]

Putting on [nsbeta2+][w/b minus on 6/15] radar.

Comment 22

[ckritzer (gone)]

PDT:  please leave nsbeta2+.

Per ------- Additional Comments From [e-mail] 2000-06-12 15:01 -------

"Nom. nsbeta2, recc. nsbeta2+, falling through to nsbeta3 hard stop if not fixed 
during nsbeta2. 

(particularly:ckritzer)

Centering of block elements is a widely used text effect on the 
web, and we need to enable this do be done. This is b.c. with widely-used html32 
tags."

Comment 23

[buster]

the place to look for this is nsBlockReflowContext::AlignBlockHorizontally().  I 
would expect the right margin to be auto, in which case we could do something 
like what is currently done now only for tables.  But the right margin is coming 
back as *not* auto, but instead the difference between 
(available_space - (x_offset+width)).  I don't know why this is the case.  Per 
CSS-2, centering should be achieved by balancing left and right auto margins.  
But the code shows that's not always the case, since it does special math for 
tables.

Comment 24

[Jim Roskind]

6/15 has passed, and so this bug was supposed to get a straight nsbeta2 minus.
Since there is a comment above requesting reconsideration, I've just deleteded 
the status, and will let the PDT/bug-triage re-evaluate in light of the 
assertion that this will break many sites.

Comment 25

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Marking M17, if we're still thinking about this for beta2.

Comment 26

[Peter Trudelle]

nsbeta2-

Comment 27

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Stealing this, since I'm working on it.

See also bug 18545.

Comment 28

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I just attached a proposed fix for this bug to bug 40038.  It still needs a bit
more testing.

Comment 29

[Marc Attinasi]

Approving for nsbeta3: CENTER has to work, David has a patch, and it is a  
moderately localized layout change.

Comment 30

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Fix checked in, 2000-07-27 16:37 PDT.

Comment 31

[Christine Hoffman]

Using original testcase with 8/25 build, verified fixed. 'Center' is centering 
the element and text-align: center is centering the text. If you take the CENTER 
tags out of the first div, text is still centered but element is not.