Closed Bug 73696 Opened 23 years ago Closed 23 years ago

Can't center a DIV using CSS

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

VERIFIED DUPLICATE of bug 49274

People

(Reporter: steevithak, Assigned: pierre)

References

()

Details

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.
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.
Assignee: clayton → pierre
Component: HTML Element → Style System
QA Contact: bsharma → ian
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.
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 ***
Status: UNCONFIRMED → RESOLVED
Closed: 23 years ago
Resolution: --- → DUPLICATE
doh. wrong bug....
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---

*** This bug has been marked as a duplicate of 49274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 23 years ago23 years ago
Resolution: --- → DUPLICATE
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.
VERIFIED DUPLICATE
Status: RESOLVED → VERIFIED
Whiteboard: (py8ieh: notify on errata from WG)
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
Whiteboard: (py8ieh: notify on errata from WG)
You need to log in before you can comment on or make changes to this bug.