Closed Bug 538192 Opened 14 years ago Closed 14 years ago

text-align:center property does not work properly for child elements of page

Categories

(Core :: Layout: Block and Inline, defect)

x86
Windows Vista
defect
Not set
major

Tracking

()

RESOLVED INVALID

People

(Reporter: Tripp529, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6 (.NET CLR 3.5.30729)

The "text-align:center" property does not work properly for child elements of page. When I add "text-align:center" to the body element it is supposed to center all child elements of the body element but it doesn't work. For example when I place a <div> element on the body it does not center align and any text or child elements of that div should center align also within that div, but they do not. This property works properly on IE8, but when I load those pages into Firefox, the page breaks.

Reproducible: Always

Steps to Reproduce:
1.<body style="text-align:center;">
        <div>This element and it's text should be centered, but it is not</div>
  </body>
2.
3.
Actual Results:  
Nothing

Expected Results:  
Elements should be centered

If I have to align all these elements manually for Firefox, it's going to be a very long day.
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#blockwidth

# [text-align] describes how inline content of a block is aligned.
 -- http://www.w3.org/TR/CSS21/text.html#alignment-prop
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Component: General → Layout: Block and Inline
QA Contact: general → layout.block-and-inline
Resolution: --- → INVALID
I tried both text-align within a div & margin:auto, both together. Nothing centers a table:

<!-- Start of the centering div -->
   <div style='text-align:center; margin:auto;'> 
  <!--#########################################################
   // #####          Test body HTML code goes here        #####
   // #########################################################-->

   <h1>help316b.htm  - Table Tests</h1>

   <br/><br/>
   
   <table border='1'>
     <tr>
       <td>
          Table test 11
       </td>
       <td>
          Table test 22
       </td>
     </tr>
   </table>
   
   Just some text for a test.

  <!--#########################################################
   // #####             End of: body HTML code            #####
   // #########################################################-->

   </div> 
<!-- End of the centering div -->

IE centers the table using just text-align:center, perhaps wrong as far as spec is concerned, but it is what people want. If you're not going to do that, then at least give us something that works & won't screw up every other browser as well.

Phil Karras
Oh, I just downloaded Firefox 3.6:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

it continues to exhibit the same problem, not centering a table within a div.

pk
The 'margin: auto' goes on the thing that's centered (the table).
I read the specs at w3.org and found them to be so confusing I couldn't understand exactly what they were saying. All I can say is that Firefox doesn't work as expected and IE does.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago14 years ago
Resolution: --- → INVALID
David,

Thanks, I forgot to copy the URL so I couldn't get back to post my solution. I did play with it a bit more & ended up solving the problem as you suggested but as I said I was unable to post the resolution.

Again, thanks!
Phil
I will say that inheritance is expected & counted on by those of us who use HTML & CSS.

using: 
<div style="text-align:center; margin:auto;">
<table>
...
</table>
</div>

I fully expect the table to inherit either the centering or the margin auto and then the table still did not inherit, THIS is the unexpected behavior.

Phil
(In reply to comment #7)
> I fully expect the table to inherit either the centering or the margin auto and
> then the table still did not inherit, THIS is the unexpected behavior.

Phil: Generally, inheritance makes no sense for the 'margin' property.  Consider a simpler case -- if someone sets "margin:50px" on an element, then it means they want a 50px margin around that element.  But it does *not* mean they want a 50px margin around *each descendant* of that element.

In any case, the CSS spec is the definitive source on what inherits and what doesn't, and in this case it says 'margin' doesn't inherit. ("inherited: no")
http://www.w3.org/TR/CSS21/box.html
We should probably consider implementing a -moz-block-align property that does what you want, as described in http://lists.w3.org/Archives/Public/www-style/2007Nov/0071.html .  It's probably worth filing a separate bug on that if there isn't one already (I couldn't find one).  However, we should change the behavior of what's clearly defined by the spec.
Daniel & David,

"But it does *not* mean they want a 50px margin around *each descendant* of that element."

True, I stand corrected, I guess I was still thinking in terms of text-align:center, which is normally inherited and which I would still like to have on child block elements as is done in (forgive me!) IE.

The only way would be if the standard changes, as I understand the argument. Unfortunately this is one time when the MS people have implemented something that the developers simply think should be, while the standards people have some reason not to codify it.

Oh-well, thanks very much for all the help & explanations.

Phil
You need to log in before you can comment on or make changes to this bug.