text-align does not center block-elements / block-content not centered

RESOLVED INVALID

Status

()

RESOLVED INVALID
15 years ago
14 years ago

People

(Reporter: bugzilla, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040803 MultiZilla/1.6.4.0b
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040803 MultiZilla/1.6.4.0b

I tried to center a <p>-element (which is a block element) with fixed width and
height by apllying the text-align method with the value "center" on the body
element - but it did not work. I was very confused and tried out very much but
text-align did never center the content of my block-box - except it was
inline-content.

Then i tried out to use the deprecated <center> element. this worked. then i
looked at a w3c page - the default style sheet for HTML 4 - and there was center
defined as

center { text-align: center }

I conclude from this that center in fact should center block elements too.

But no GeckoBrowser does.

(opera, MSIE, safari, Konqueror - they do correctly)

Reproducible: Always
Steps to Reproduce:
1. Create an HTML Page like this:
<html>
<head>
<style>
body {
display: block;
text-align: center; }
p {
width: 300px;
height: 150px;
background: green; }
</style>
</head>
<body>
<div>heyho</div>
</body>
</html>
Actual Results:  
the div-element will not be centered.

Expected Results:  
it should have centered the div-element.

Comment 1

15 years ago
To center block level elements, use margin-left : auto; margin-right : auto; on
the element.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

14 years ago
(In reply to comment #1)
> To center block level elements, use margin-left : auto; margin-right : auto; on
> the element.

so either the declaration of <center> as text-align: center is wrong or your
implementation of <center> - or text-align as i said.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

Comment 3

14 years ago
Your conclusion does not follow from your premise.

text-align: center, will center the blocks inline content with respect to itself.

margin:auto will center the block with respect to its containing block.

It's the 2nd you want here.

Comment 4

14 years ago
Don't reopen this bug.  It is not valid.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago14 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.