CSS Text Align


CSS provides a property called text-align which is used to align the text in a block element. It can be used to align the text on the left, right, center, or justify.

The text-align has the following values:

CSS text-align example
This is an example text. (Resize editor to see justify)

Let's see the example of the text-align property.


Example of text-align

We have a div element and inside it we have a p element. Let's test the text-align property on it.


text-align: left

By default, the text-align property is set to left. So, the text will be aligned to the left of the container.

Example

p {
  text-align: left;
}
Try it

Output:

The text is aligned to the left of the container.


text-align: right

When the text-align property is set to right, the text is aligned to the right of the container.

Example

p {
  text-align: right;
}
Try it

Output:

The text is aligned to the right of the container.


text-align: center

When the text-align property is set to center, the text is aligned to the center of the container.

Example

p {
  text-align: center;
}
Try it

Output:

The text is aligned to the center of the container.


text-align: justify

The text is stretched to fill the entire line. When the text-align property is set to justify, the text is aligned to both the left and right margins.

Example

p {
  text-align: justify;
}
Try it

Output:

The text is stretched to fill the entire line.


text-align: start

When the text-align property is set to start, the text is aligned from the start of the container. When the direction: rtl then starting position is right so it will start from the right side.

Example

p {
  text-align: start;
}
Try it

Output:

The text is aligned from the start (left-to-right).

The text is aligned from the start (right-to-left).


text-align: end

When the text-align property is set to end, the text is aligned from the ending of the container. When the direction: rtl then the ending position is left so it will end on the left side.

Example

p {
  text-align: end;
}
Try it

Output:

The text is aligned from the ending (left-to-right).

The text is aligned from the ending (right-to-left).


Also, learn how to center div elements and how to center images.