Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

Knowing that content on a web page doesn't always fill the entire width of the rectangular area in which it is displayed, it is often helpful to control the alignment of the content. Even if text within a rectangular area extends to multiple lines, alignment still enters the picture because you may want the text justified left or right, or centered. There are a couple of style properties that allow you to control the alignment of web page content: text-align and vertical-align. I touched on these properties in Hour 5, "Basic Text Alignment and Formatting," but it doesn't hurt to mention them again here in a bit more detail while we're deep into CSS layout styles.

The text-align property aligns an element horizontally within its bounding area, and it can be set to left, right, center, or justify. The justify value performs a full justification on an element. Following is an example of using the text-align property to center a hypothetical web page advertisement:

div.ad { width:275px; margin-bottom:10px; border:5px double black; color:black; background-color:yellow; text-align:center }

The last style property defined in this style rule involves setting the text-align style to center, which results in the div.ad element being centered within its parent. If the parent of this element is the web page itself, the element will be centered on the page.

The vertical-align property is similar to text-align except that it is used to align elements vertically. The vertical-align property specifies how an element is aligned with its parent, or in some cases the current line of elements on the page. When I say "current line," I'm really referring to the vertical placement of elements that appear within the same parent element. In other words, I'm talking about inline elements. If several inline elements appear on the same line, you can set their vertical alignments the same to align them vertically. A good example would be a row of images that appear one after the nextthe vertical-align property allows you to align them vertically.

Following are the acceptable values for use with the vertical-align property:

• top Aligns the top of an element with the current line.

• middle Aligns the middle of an element with the middle of its parent.

• bottom Aligns the bottom of an element with the current line.

• text-top Aligns the top of an element with the top of its parent.

• baseline Aligns the baseline of an element with the baseline of its parent.

• text-bottom Aligns the bottom of an element with the bottom of its parent.

• sub Aligns an element as a subscript of its parent.

• super Aligns an element as a superscript of its parent.

Following is an example of how the vertical-align property is used to center text vertically:

div.ad { width:275px; margin-bottom:10px; border:5px double black; color:black; background-color:yellow; text-align:center; vertical-align:middle }

This code shows how simple it is to modify a style rule so that the element is aligned vertically. In this case, the div.ad element is vertically aligned with the middle of its parent.