Vertical centring
How about when you want to vertically centre something like a bit of text or a picture or a block of text (with or without pictures) in relation to another bit of text or picture or both or indeed, in relation to the element's top and bottom edges? Let's take these issues up in turn to see how the CSS property vertical-align copes.
With HTML table mark-up
Using HTML table mark-up, it is easy enough to vertically center some text or a picture in relation to other text and in relation to the top and bottom edge of its container. The old, now largely deprecated HTML attribute of valign (as in valign="top") is now done in CSS by vertical-align (as in vertical-align: top). Both valign="middle" and vertical-align: middle; were and are the defaults, so they do not usually need specifying. For example, in Fig 1 below whether you specify vertical-align: middle or not, it will usually display the same:
| toy |  |
toy | toy |
Fig 1. <td>toy</td><td><img src="pics/ruler_100pxHigh.png" alt=""></td></td><td style="font-size:6em;">toy</td>
and you should get same result with the unnecessary:
<td style="vertical-align:middle;">toy</td><td style="vertical-align:middle;"><img src="pics/ruler_100pxHigh.png" alt=""></td><td style="vertical-align:middle; font-size:2em;">toy</td><td style="vertical-align:middle; font-size:6em;">toy</td>
With CSS table styling
What about where a table is semantically inappropriate? How does one vertically middle align various bits with other bits? Well, it depends on what the case is. The CSS vertical-align property applies to the content of normal block elements when they are displayed as table-cells. I refer to a CSS styling that mimics HTML table layout, described below. Not all popular browsers support it, especially not IE less than version 8, so this is a limitation.
You can display an element like a DIV as a table cell without resorting to HTML table mark-up. You can instead just style it as a table cell. Let's illustrate with a couple of DIVs. A caveat: unlike with table cells, the default alignment of text and pictures inside any element is baseline, the imaginary line that letter descenders go below, on which the bottom of the letters with no descenders sit. So we need to explicitly state the property of vertical-align and its value of middle to get it, it is not default outside of real table cells.
Fig 2. <div style="display:table; border-collapse:collapse;"><div style="display:table-cell; border:1px solid; vertical-align:middle">toy</div><div style="display:table-cell; border:1px solid; vertical-align:middle"><img src="pics/ruler_100pxHigh.png" alt=""></div><div style="display:table-cell; border:1px solid; font-size:2em; vertical-align:middle">toy</div><div style="display:table-cell; font-size:6em; border:1px solid; vertical-align:middle">toy</div></div>
With normal inline elements
'Vertical-align' applies to normal inline elements (outside HTML table cells as well as without them being displayed as table-cells via CSS). Inline elements are elements like spans, anchors and images (all are by default 'display: inline;').
Here is that caveat again but applied to situations where we want to middle align normal inline elements: unlike with table cells, the default alignment of inline material is baseline, the imaginary line that letter descenders go below, on which the bottom of the letters with no descenders sit. If we underline a couple of spans separately, you can see how they line up vertically:
Some text, an image , some BIG text
Fig 4. <p><span style="text-decoration:underline;">Some text</span>, <span style="text-decoration:underline;">an image <img src="pics/crimson.png" alt=""></span>, <span style="font-size:4em; text-decoration:underline;">some BIG text</span></p>
Now let's do this one again but with vertical-align: middle on all the bits to be aligned:
Some text, an image , some BIG text
Fig 5. <p><span style="text-decoration:underline; vertical-align:middle;">Some text</span>, <span style="text-decoration:underline; vertical-align:middle;">an image <img style="vertical-align: middle;" src="pics/crimson.png" width="10" height="30" alt=""></span>, <span style="font-size:4em; text-decoration:underline; vertical-align:middle;">some BIG text</span></p>
Using absolute positioning
Next we go into centring using absolute positioning.