html5_alignment

!meta title="Spec/HTML5 Alignment" !meta author="James Bursa" !meta date="2011-11-26T22:20:33Z"

!toc The way HTML's align attribute interacts with CSS properties is only really explained in the HTML5 spec. However, the explanation there is quite opaque. Here there is a clearer version with more explanation.

Spec

|  When a user agent is to align descendants of a node, the user
|  agent is expected to align only those descendants that have both
|  their 'margin-left' and 'margin-right' properties computing to a
|  value other than 'auto', that are over-constrained and that have
|  one of those two margins with a used value forced to a greater
|  value, and that do not themselves have an applicable align
|  attribute.
                                              -- HTML5 10.2.4 original

Simplified:

|  When a user agent is to align descendants of a node, the user agent
|  is expected to align only those descendants that:
|
|   1  have both their 'margin-left' and 'margin-right' properties
|      computing to a value other than 'auto',
|
|   2  are over-constrained, and that have a left or right margin with
|      a used value forced to a greater value, and
|
|   3  do not themselves have an applicable align attribute.

                                              -- tlsa's interpretation

I have separated the sentence where I think the criteria are and made it more clear.

Further explanation

Criterion 1 detail:

A box that doesn't have either left, right, or both left & right margins set to 'auto', to align the box "the CSS way".

Criterion 2 example:

    #example2 { width:200px;
                margin-left: 0;
                margin-right: 0; }

    <div style="width:800px;">
        <div id="example2">
            This div meets criterion 2
        </div>
    </div>