Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 8: CSS Buoyancy: Floating and Vertical Alignmentthe surrounding text, for instance the lowercase letters t, l, f, or the uppercase letters. Likewise thetext-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 similarto that produced by the top and bottom keywords. The most important difference between top andtext-top is that top causes the border of the inline box to align with the top border of the line containingthat inline box, whereas text-top aligns with respect to the tallest character in the font.The next section discusses percentage and length values as applied to the vertical-align property.Percentage and Length ValueIf the selection of keywords I presented in the previous sections weren’t enough for you, the verticalalignproperty also allows percentage and length values to be applied. Figure 8-18 demonstrates thevertical-align property with a value of 300%.Figure 8-18Percentage values with the vertical-align property are based on the line-height of the element thepercentage value is applied to. If you remember back to Figure 8-15b, which shows the markup structureof this document, the element that contains the text 300% has a line-height of 23 pixels. If yourecall, I didn’t give the element an explicit line-height; I determined the line-height byincluding the line-height property and increasing or decreasing the value until I achieved the sameresults that you see in Figure 8-18. To calculate the pixel value of 300%, I take the line-height, 23, andmultiply it by 3, to get 69, so the pixel value of 300% in Figure 8-18 is 69px. The default line height differsfrom browser to browser and between different font sizes, so your own results may vary.Figure 8-19 demonstrates the vertical-align property with a length of 69 pixels, which should beidentical to what you see in Figure 8-18, concerning the placement of the box.311