Small mistake in the example, I meant td instead of table.
td[align=center] { text-align: center; }
td[align=center] > *[display=block or table]{ margin-left: auto; margin-right: auto; }
On Thu, Sep 20, 2012 at 10:10 AM, Derk-Jan Hartman < d.j.hartman+wmf_ml@gmail.com> wrote:
On Wed, Sep 19, 2012 at 9:15 PM, Derric Atzrott < datzrott@alizeepathology.com> wrote:
DJ would you mind explaining again (in different terms) why we can't do both #1 and #4 (#1 as a temporary measure while we achieve #4)? I don't think I quite understood your first explanation.
I'll try. Before HTML4, the "align" attribute (other than for 'table') with the value "center" meant "Center all of my content". Since the attribute has been removed from the spec, you need to replace it with CSS rules. Unfortunately however there are no CSS rules that are able to exactly reproduce the behavior of the attribute.
You have "text-align:center;" but this only applies to content that is inline. It does not center a div inside a table cell for instance, where align="center" would have done this. To get this behavior, you need to apply "margin-left:auto; margin-right:auto;" on the div.
So the pseudo CSS rules would be something like: table[align=center] { text-align: center; }
table[align=center] > *[display=block or table]{ margin-left: auto; margin-right: auto; }
The problem is that as far as I know, that last one is not possible with CSS. You cannot say: "apply this style to all direct children that are in block mode".
If you look at the internals of mozilla and webkit, then you will note they have the same problem (they also transform the align attribute). Therefore they have the following browser specific text-align attributes: -webkit-right, -moz-right, -webkit-center etc... which bypass the default behavior of text-align to apply to just inline elements to include block elements as well. How other browser vendors do this, I'm not sure of.
DJ