Delphinidin

- Vertically Aligning Content
The vertical-align property is used primarily in two contexts. In one context, it is used to vertically align text appearing within the lines of a paragraph. One example of this creates subscript or superscript text. The vertical-align property may also be used to align the content appearing inside a table cell. The following code outlines the vertical-align property and its possible values.

{vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>;}
Initial value: baseline

The vertical-align property applies exclusively to inline elements, such as <img/> and <span>. It has different meaning when applied to table cells. I discuss its use in cells in an upcoming section. In the next section, however, I look at how to format subscript text with the vertical-align property.

-- Subscript and Superscript Text Within a paragraph, you may need several different types of styles that are only applied to snippets of the text, such as bold or italic fonts. Subscript text is an example of styles that often apply only to a selection of text, rather than to a whole paragraph. Subscript text is text that appears slightly smaller than the text surrounding it and slightly lower than the baseline of the surrounding text. The baseline is the invisible line created for each line of text against which the bottom of each letter is aligned. In other words, the baseline is the line that letters “sit” on. Superscript text, on the other hand, is text raised above the baseline and that appears slightly smaller than the surrounding text.

-- The top, Middle, and Bottom Keywords
The top, middle, and bottom keywords are used to control vertical alignment of selections of text that are slightly smaller than the surrounding text. The top keyword is demonstrated in the following snippet.

.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}

-- The Text-Top and Text-Bottom Keywords
Like the top, middle, and bottom values, the text-top and text-bottom keywords raise or lower a subset of text. The difference in the text-top keyword as opposed to the top keyword is that the text-top keyword causes alignment to happen with respect to the tallest character of the font of the surrounding text. Likewise, the text-bottom keyword aligns with respect to the lowest character, for instance the letters p, y, or g, which drop below the baseline. The text-top and text-bottom keyword values produce output similar to that produced by the top and bottom keywords.

The most important difference between top and text-top is that top causes the top of the text to align with the top of the line containing that inline box, determined by the line-height (see my old post), whereas text-top aligns with respect to the tallest character in the font.

-- Percentage and Length Value
If the selection of keywords I presented in the previous sections weren’t enough for you, the vertical-align property also allows percentage and length values to be applied. The following code demonstrates this:

.align-percent {vertical-align: 50%;}

Giving the vertical-align property percentage or length values positioned text above the text base line by the value given. In the case of percentage values, the distance is based on the line-height of the positioned element.

-- Vertically Aligning the Contents of Table Cells
The vertical-align property has a completely different meaning when it is applied to table cells. When applied to table cells, only the baseline, top, middle, and bottom keywords are applicable, and the vertical-align property is used to align the entire contents of the cell. As these keywords behave in the same way as we have seen before, but with the context of the table cell rather than the bounding box determined by line-height.

Read Again:
CSS Floating and Vertical Alignment - Part 1