Align and Indent

You’ve probably noticed that most of your HTML paragraphs don’t have an initial indentation. You can use margin or padding to push paragraphs to the right, but that affects the entire paragraph, not just the first line. Furthermore, text is always left-aligned. How do we make centered text, or right-aligned text?

As we saw in the “Borders” section, the box model controls the area around the text. This section shows how to move the text around inside the box itself.

Indenting Text

To indent text, use the handily-named text-indent property. The following CSS snippet adds a 2.0 em indent to all paragraphs:

Example 3.24. Indented Paragraphs

<html>
<head>
  <style>
    p {
      text-indent: 2.0em;
    }
  </style>
</head>
<body>
  <p>
    "On the contrary," said Holmes, quietly, "I have every reason
    to believe that I will succeed in discovering Mr. Hosmer Angel."
  </p>
  <p>
    Mr. Windibank gave a violent start, and dropped his gloves.
    "I am delighted to hear it," he said.
  </p>
  <p>
    "It is a curious thing," remarked Holmes, "that a typewriter
    has really quite as much individuality as a man's handwriting.
    Unless they are quite new no two of them write exactly alike.
    Some letters get more worn than others, and some wear only on
    one side. Now, you remark in this note of yours, Mr. Windibank,
    that in every case there is some little slurring over the e, and
    a slight defect in the tail of the r. There are fourteen other
    characteristics, but those are the more obvious."
  </p>
</body>
</html>

If you enter a negative value for text-indent, the first line of the text will shift to the left. This is useful for creating “hanging indents” for headings and the like. The only trick is that you must set the padding of containing block accordingly.

Example 3.25. Hanging Indent

<html>
<head>
  <style>
    div {
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 5px;
      padding-left: 30px;
      border: 3px solid;
    }
    h2 {
      text-indent: -25px;
    }
  </style>
</head>
<body>
  <div>
    <h2>The Red-Headed League</h2>
    <p>
      I had called upon my friend, Mr. Sherlock Holmes, one
      day in the autumn of last year, and found him in deep
      conversation with a very stout, florid-faced elderly
      gentleman, with fiery red hair. With an apology for my
      intrusion, I was about to withdraw, when Holmes pulled
      me abruptly into the room and closed the door behind me.
    </p>
  </div>
</body>
</html>

The “container” div has a uniform padding of 5px all around, except for the left padding, which is 30px. The h2 element has its text-indent set to negative 25px. The result is that the h2 shifts 30px to the right due to the padding, and then shifts 25px back to the left due to the negative text-indent. All other elements are 30px from the left edge. The result is a 25px hanging indent.

Horizontal Alignment

The text-align property allows you to align text to the right, left, or center within its containing block. The four options are:

left: Aligns the text along the left edge of the box, leaving a ragged edge to the right. This is the default.
center: Centers the text within the box.
right: Aligns the text along the right edge of the box, leaving a ragged edge to the left.
justify: Aligns the text along both the right and left edges of the box. This can cause the word spacing in the line to become uneven. The justify option isn’t as well-supported in some older browsers.

Let’s take a look at all four options:

Example 3.26. Left, Center, Right, and Justified

<html>
<head>
  <style>
    div { border: 3px solid; padding: 5px; }
    div.left { text-align: left; background: #ffcccc; }
    div.center { text-align: center; background: #ccffcc; }
    div.right { text-align: right; background: #ccccff; }
    div.justify { text-align: justify; background: #ffffcc; }
  </style>
</head>

<body>
  <div class="left"><em>Left-aligned text.</em></div>

  <div class="center"><em>Centered text.</em></div>

  <div class="right"><em>Right-aligned text.</em></div>

  <div class="justify"><em>Justified text.</em> Upon this a question
  arises: whether it be better to be loved than feared or feared than
  loved? It may be answered that one should wish to be both, but, because
  it is difficult to unite them in one person, it is much safer to be
  feared than loved, when, of the two, either must be dispensed with.
  Because this is to be asserted in general of men, that they are
  ungrateful, fickle, false, cowardly, covetous, and as long as you
  succeed they are yours entirely; they will offer you their blood,
  property, life, and children, as is said above, when the need is far
  distant; but when it approaches they turn against you.</div>
</body>
</html>

Keep in mind that text-align aligns text and other inline content within boxes. It does not affect blocks themselves. For example, you can’t use text-align: center to center a smaller box within a larger box. This sort of thing is part of a more advanced concept called CSS positioning.