Closed Bug 226936 Opened 22 years ago Closed 22 years ago

CSS 'text-align:center' is ignored when used on BODY tag

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: mpappert, Assigned: dbaron)

References

(
URL
)

Details

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322) Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030 CSS Style 'text-align:center' seems to be ignored when you apply the style to the BODY tag (i.e. doesn't center the page). It works in the latest versions of IE and Opera. Reproducible: Always Steps to Reproduce: 1. <BODY style="text-align:center"> 2. Add some content 3. Load in Mozilla Browser Actual Results: Content remains left aligned, instead of being centered. Expected Results: Content should be centered on page. This prevents a webpage from being "W3C HTML4.01 Strict" compliant, as the only workaround is either to use the <CENTER> tag or <DIV align="CENTER"> tags (the text-align:center is also ignored when used in the DIV tag for centering the whole page)
CSS text-align property is the align of text elements, not of the block elements (such as DIV). To center a block element use set the margin property to "auto", e.g. <div style="margin:auto;">I am a centered &lt;div&gt;!</div> What you see in IE is a bug in IE's CSS implementation (and this bug is in some cases emulated by the Opera browser). Resolving INVALID.
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → INVALID
text-align aligns text, not blocks. You want margin:auto. See the specs for more details, specifically: # If both 'margin-left' and 'margin-right' are 'auto', their used values are # equal. This horizontally centers the element with respect to the edges of the # containing block. -- http://www.w3.org/TR/CSS21/visudet.html#q6 # [text-align] describes how inline content of a block is aligned. -- http://www.w3.org/TR/CSS21/text.html#alignment-prop
oK, I understand now that I should be using DIV margin, but when I insert that into my code it doesn't work. If you look at my URL above, I've updated the webpage with the code you provided, but it still left-aligns the table. I have tested with both <DIV style="margin:auto"> and <DIV style="margin- left:auto; margin-right:auto"> and neither work (in ALL browsers now). I also tried modifying my stylesheet to make the body tag use the margin:auto style, but that didn't work either. I have left the modified source code (with the latter DIV 'fix' implemented) so you can see the results and code. Thanks!
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
You didn't specified a width. This is invalid, leave it that way.
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago → 22 years ago
Resolution: --- → INVALID
and in any case here you want to center the table, not the div, so set it on the table, not the div. Please, read the specs. This is not a Web design help forum.
You need to log in before you can comment on or make changes to this bug.