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:
- left - It aligns the text to the left of the container. It is the default value.
- right - It aligns the text to the right of the container.
- center - It aligns the text to the center of the container.
- justify - When the text-align property is set to justify, the text is aligned to both the left and right margins. The text is stretched to fill the entire line.
- start - It aligns the text from the start of the container. When the direction: rtl then starting position is right so it will start from the right side and will look as if it's right aligned.
- end - It aligns the text from the ending of the container. When the direction: rtl then the ending position is left so it will end at the left side and will look as if it's left aligned.
- inherit - It inherits the text-align value from its parent element.
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.
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.
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.
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.
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.
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.
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.