CSS Basics: CSS Text-Align Made Easy ⋄ A Beginner's Guide to Enhancing Your Web Design

The CSS property text-align is used to align text and inline elements. You can also use text-align to center an image in its parent element. However, this only works if the image is placed in a block element, such as a div.

The value shown in orange is the standard use of the CSS text-align property.

1. The text-align property only applies to block elements.

2. • text-align: left will align the text to the left.

   • text-align: right will align the text to the right.

   • text-align: center will cause the text to be centered horizontally.

   • text-align: justify will align the text so that it is in the justified text mode.

3. Avoid justifying text because it can result in spaces of different width between words. This can make the text difficult to read.

4. The value initial forces the restoration of the original text alignment, i.e. initial sets the default text alignment of the text-align property for the element. For Western languages, this is the value left for left-aligned.

5. The inherit value forces the text alignment to be inherited from the parent element.

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2, h3 {
  text-align: left;
}