Alignment in HTML and CSS

This information is intended to help fixing Mozilla bug 192077. 30th August 2005: fixed.

• HTML: ALIGN
  • What does the specification say
  • What do the browsers do
    • Gecko (Mozilla, Firefox, ...)
    • Konqueror
    • Internet Explorer
    • Opera
• CSS: vertical-align
  • What does the specification say
    • The browsers
• HTML: ALIGN (non-standard)
• Other info

HTML: ALIGN

What does the specification say

From HTML 4.01: Alignment:

• bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.
• middle: means that the center of the object should be vertically aligned with the current baseline.
• top: means that the top of the object should be vertically aligned with the top of the current text line.

What do the browsers do

I have used this testcase from Mozilla bug 192077.

Gecko (Mozilla, Firefox, ...)

Screenshot of Firefox 1.0.6

• bottom: ok
• middle: wrong
• top: ok

Konqueror

Screenshot of Konqueror 3.4.0

• bottom: ok
• middle: ok
• top: ok

Internet Explorer

Screenshot of IE 6

• bottom: ok
• middle: ok
• top: ok, but seems a bit lower than the rest

Opera

Screenshot of Opera 8.02

• bottom: ok
• middle: wrong
• top: ok

CSS: vertical-align

What does the specification say

From CSS 2.1: vertical-align:

baseline

Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.

middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

sub

Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)

super

Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)

text-top

Align the top of the box with the top of the parent's content area (see 10.6.1).

text-bottom

Align the bottom of the box with the bottom of the parent's content area (see 10.6.1).

<percentage>

Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.

<length>

Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.

top

Align the top of the aligned subtree with the top of the line box.

bottom

Align the bottom of the aligned subtree with the bottom of the line box.

The browsers

As in HTML, I have used this testcase from Mozilla bug 192077.

The screenshots: Firefox 1.0.6, Konqueror 3.4, Internet Explorer 6, Opera 8.02.

Some browsers seem to show 1 px misalignments in a few cases, but I have ignored that, and report only the big disagreements.

baseline,

middle,

text-top,

super:

Same behaviour.

top:

IE renders it as it if were text-top, the rest agree.

sub:

IE renders it as it if were middle, the rest agree.

bottom:

Firefox and Konqueror seem to behave well. IE and Opera do another thing, which I don't understand.

HTML: ALIGN (non-standard)

These properties are not defined in any specification.

ABSMIDDLE,

BASELINE:

Same behaviour.

ABSBOTTOM,

CENTER:

Firefox and Konqueror, one way. IE and Opera, other.

ABSCENTER:

Mozilla does it differently from the other 3.

TEXTTOP:

Opera does it differently from the other 3.

The screenshots: Firefox 1.0.6, Konqueror 3.4, Internet Explorer 6, Opera 8.02.

Other info

• HTML ALIGN is deprecated, but ALIGN=MIDDLE is the only way to lower an image by half its overall height, which is needed, for instance, in Latex2HTML (more).

Updated on 01-09-2005. Daniel Clemente Laboreo (web). n142857 #at/$/g-m-a-i-l-./-c-o-m