HTML and CSS Reference
In-Depth Information
Figure 9-20
The difference between vertically aligning the speech bubble to the text-top and top.
Vertical Centering Techniques
It's both disappointing and initially misleading that the
vertical-align
property can be used only
on inline-level and table-cell elements. The
position: center;
declaration introduced in the CSS Level 3
Positioned layout module found at
www.w3.org/TR/css3-positioning/
will, I hope, see the light of day
and make vertical alignment easier in the future. For now, though, let's go back to positioning the showcase button
and cover a few different techniques for making it vertically centered.
The following techniques all have their own pros and cons, and unfortunately, there isn't a perfect solution. There-
fore, when you are vertically aligning elements in the future, use your best judgment.