What's up with vertical-align style?

[lozina]

I can't get this thing to work in either a <div> tag or a <p> tag. Is it something ignored by IE ?

 

[igowerf]

The vertical-align attribute doesn't work like valign in tables.

It moves inline elements relative to the line-height. In other words, it vertically aligns text/images within a line of text like superscript or subscript.

Basically, imagine a big 500x500 div tag. By default, the line-height is around 15px so each line of text takes up 15px of vertical space. If you applied vertical-align to an inline element like a single word, it will be moved relative to the 15px line height (superscript text is vertical-align: top and subscript is vertical-align: bottom)

If you want to vertically align something in the 500x500 box (valign="middle), then you'll need to set the line-height CSS attribute of the box to 500. The makes it so that the box can only hold one line of text in its 500px space.

Copy and paste this code into a blank page to see what I mean.

 

[sunase]

IIRC it only works like you'd think in table cells (or things with display:table-cell in browsers that support that) and vertical alignment within a line (like of an inline image with respect to text). That's off the top of my head, though, maybe consult Google and the spec.. ^^

Edit: Ah, igowerf beat me to it. I should refresh more often. ^^