text-align

With the text-align property, you can control the horizontal alignment of paragraphs:

H4 { text-align: center }

Here are your options:

A value of left means the element will be left-aligned. A value of right means the element will be right-aligned. A value of center means the element will be centered. And finally, a value of justify means the element will be justified. Note that justify works in Communicator (both platforms) and IE 4 and 5 (Windows) but not in IE 3 or 4 (Mac).

If your browser doesn't support this CSS property, click here to see what it looks like.

Until now, we've been talking only about applying stylesheets to text. But many properties can also be used on replaced elements. (A replaced element is any object that is replaced by other content. Graphics are the most common replaced elements, but Java applets and QuickTime movies are also frequently replaced.)

So we can also right-align an image, like so:

If your browser doesn't support this CSS property, click here to see what it looks like.

(Communicator sometimes doesn't like it if you apply CSS properties directly to the <IMG> tag. A work-around is to surround <IMG> with <SPAN> or <DIV> and then apply the stylesheet to the <SPAN> or <DIV> tag instead. <DIV> is better, because IE for Windows sometimes has problems associating a style with <SPAN>.)

vertical-align

Let me say right off the bat that browser support for vertical-align is almost zero. But I will state the basics here, in the hope that later browsers will support it.

H4 { vertical-align: top }

Here are all the possible values for vertical-align:

• top aligns the top of the element with the tallest parent element on the line.
• bottom aligns the bottom of the element with the lowest parent element on the line.
• text-top aligns the top of the element with the top of the font of the parent element.
• text-bottom aligns the bottom of the element with the bottom of the font of the parent element.
• baseline aligns the baseline of the element with the baseline of the parent element.
• middle aligns the midpoint of the element with the middle of the parent element.
• sub puts the element in subscript.
• super puts the element in superscript.

text-indent

Want to give a paragraph an indent? (After living on the Internet for a while, you may have forgotten what an indent is!) Use the text-indent property:

P { text-indent: 2em }

Here you can see the above rule applied. The property works only on block-level elements (as defined earlier on this page). You can specify text-indent using any of the familiar length units.

You can also use percentage values. For example, this paragraph has an indent of 40 percent, which means the first line is indented 40 percent from where it would normally begin. (IE 4 for Windows assumes the percentage refers to the entire browser window, not just the width of the paragraph.)

Finally, if you give your text-indent a negative value, then you get a so-called hanging indent, in which the first line actually begins left of where it normally would. This paragraph has a text-indent of -10 pixels. IE 4 and 5 are a little buggy: They might not display the first few letters.

The preceding three paragraphs were written using the CSS text-indent property. If your browser doesn't support this property, click here to see what it looks like.

Use your indenting power well, young Jedi knight.

Indents are nice, but what about genuine margins? You got it.