73696 - Can't center a DIV using CSS

Status: VERIFIED DUPLICATE of bug 49274

(Core :: CSS Parsing and Computation, defect)

Description

[Steevithak]

It seems to be impossible to center things with a DIV using CSS. It works fine
in Netscape and IE (all version & platforms I could test) but fails in Mozilla
0.8 and 0.8.1 on Windows NT/2K and Linux. I set up a test page and style sheet
with bare minimal html to demonstrate the problem. Compare the page in mozilla
and any other browser.

Comment 1

[Boris Zbarsky [:bzbarsky]]

For the text-align property, the description says:

This property describes how inline content of a block is aligned.

A <table> is a block-level element and so unaffected by the text-align property.
 To properly center it, use "table {margin: auto}"

Looks invalid to me based on the CSS2 spec.

Comment 2

[Steevithak]

I am basing my expectations on the CSS book by Eric Meyer published by O'Reilly. 
It agrees that text-align: center should NOT center a block-level element 
directly but it indicates that block-level elements wrapped by a DIV should be 
centered when a text-align: center is applied to the DIV. There is even an 
example of this on page 89 of the book. The example shows a text-align: center 
applied directly to a block-level object (an image in this case) and the 
resulting screen capture shows that it is not centered. The object is then 
wrapped in a DIV and a text-align: center applied to the DIV. The resulting 
screen capture shows the object being centered.

Comment 3

[Boris Zbarsky [:bzbarsky]]

see bug 11384, bug 62625 and bug 35348 for lots of discussion of this.

Marking duplicate of a bug that covers this _exact_ situation (and is marked
invalid).

Also, I should note that Amaya does not center the tables inside <div> elements
with text-align:center in your testcase, while centering any text in such divs...



*** This bug has been marked as a duplicate of 49247 ***

Comment 4

[Boris Zbarsky [:bzbarsky]]

doh. wrong bug....

Comment 5

[Boris Zbarsky [:bzbarsky]]

*** This bug has been marked as a duplicate of 49274 ***

Comment 6

[Steevithak]

I'll take your word for it. But in addition to examples in CSS books showing it 
to work that way, the CSS standard itself sure seems to say it works:

From http://www.w3.org/TR/REC-CSS1#text-align
5.4.6    'text-align'
DIV.center { text-align: center }
Since 'text-align' inherits, all block-level elements inside the 'DIV' element 
with 'CLASS=center' will be centered.


At the very least, I would think that this should be part of the "quirks" mode 
where Mozilla renders documents the way IE, NS, and user expectations dictate.

Comment 7

[Hixie (not reading bugmail)]

VERIFIED DUPLICATE

Comment 8

[Hixie (not reading bugmail)]

Steven: Note that the CSS1 spec errata has now been edited to make this clearer:
# [2001-06-26] "Since 'text-align' inherits, all block-level elements inside the 
# 'DIV' element with 'CLASS=center' will be centered." This is ambiguous. Intended 
# is: "... all line boxes of all block-level elements..."
   -- http://www.w3.org/Style/css1-updates/REC-CSS1-19990111-errata.html