CSS Basics: Text-Align Made Simple – A Comprehensive Guide for Beginners to Perfectly Align Your Text

Deutsch

CSS Property Text-Align – Text Alignment

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.

CSS Property text-align
Description Possible Values Default Value Category
text alignment left
right
center
justify
initial
inherit		 left display Text
Text

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

Note:

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

    • 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.

Example 
p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2, h3 {
  text-align: left;
}