Which elements should be affected by text-align:center

Giganews Newsgroups
Subject: Which elements should be affected by text-align:center
Posted by:  Stevo (no@mail.invalid)
Date: Tue, 10 Jun 2008

I've found that for IE6+, if you add the property text-align:center to a
  DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.

Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.

Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?

Here's a copy/pasteable test page that will work offline that exhibits
the scenario. You see in IE6+ that everything is aligned (the image, the
text, the table and the div). Try it in Safari or Firefox and you see
that the table and div aren't affected by the text-align property in the
parent div. I'm not saying that's wrong, but I'm encountering a site (or
two) that are using text-align to achieve centralization and consider
that there's something wrong with my DIV that I write into it if it's
not aligned centrally in Firefox/Safari. Now I know (or at least think)
they're wrong in that assumption, but I'm the one that needs to (a)
prove it, and (b) come up with a workaround on my end.

<html><body>
<table border=1 width=500>
  <tr>
  <td>
    <div style="text-align:center">
    <b>Using text-align:center</b>
    </div>
  </td>
  </tr>
  <tr>
  <td>
    <div style="text-align:center">
    <img width=100 height=30 border=1>
    </div>
  </td>
  </tr>
  <tr>
  <td>
    <div style="text-align:center">
    TEXT
    </div>
  </td>
  </tr>
  <tr>
  <td>
    <div style="text-align:center">
    <div style="background-color:yellow;width:60px;">DIV</div>
    </div>
  </td>
  </tr>
  <tr>
  <td>
    <div style="text-align:center">
    <table><tr><td>table</td></tr></table>
    </div>
  </td>
  </tr>
  <tr>
  <td>
    <center>
    <b>Using regular &lt;center&gt; tag</b>
    </center>
  </td>
  </tr>
  <tr>
  <td>
    <center>
    <img width=100 height=30 border=1>
    </center>
  </td>
  </tr>
  <tr>
  <td>
    <center>
    TEXT
    </center>
  </td>
  </tr>
  <tr>
  <td>
    <center>
    <div style="background-color:yellow;width:60px;">DIV</div>
    </center>
  </td>
  </tr>
  <tr>
  <td>
    <center>
    <table><tr><td>table</td></tr></table>
    </center>
  </td>
  </tr>
</table>
</body></html>

Replies