CSS text-align Property
The text-align property sets the horizontal alignment of text.
Possible Values
- left - text is aligned with the left side of the line boxes.
- right - text is aligned with the right of the line boxes.
- center - text is aligned in the center of the line boxes.
- justify - text is aligned with both sides of the line boxes.
- inherit - the value is inherited from the parent element.
A block of text is made up of individual line boxes each containing a line of text. The text-align property sets how the lines of text will be aligned in the line boxes within an element.
The default value of text-align is determined by the direction of the text, if the direction is left-to-right
then the default value is left if the text runs from right-to-left then the default is right.
A value of center means that the text is aligned in the center of the box with equal white space at either end of the line.
A value of justify causes the text to be flush with both sides of the line boxes with extra white space added within
the line to give correct spacing.
text-align examples:
{text-align: left;}
The text in this paragraph has been given the text-align value of left which causes the text to be aligned with the left hand side of the individual line boxes which make up the contents of the paragraph element.The text in this paragraph has been given the text-align value of left which causes the text to be aligned with the left hand side of the individual line boxes which make up the contents of the paragraph element.
{text-align: right;}
The text in this paragraph has been given the text-align value of right which causes the text to be aligned on the right hand side of the individual line boxes which make up the contents of the paragraph element.The text in this paragraph has been given the text-align value of right which causes the text to be aligned on the right hand side of the individual line boxes which make up the contents of the paragraph element.
{text-align: center;}
The text in this paragraph has been given the text-align value of center which causes the text to be aligned from the center of the individual line boxes which make up the contents of the paragraph element.The text in this paragraph has been given the text-align value of center which causes the text to be aligned from the center of the individual line boxes which make up the contents of the paragraph element.
{text-align: justify;}
The text in this paragraph has been given the text-align value of justify which causes the text to be aligned on both sides of the individual line boxes which make up the contents of the paragraph element.The text in this paragraph has been given the justify value of justify which causes the text to be aligned on both sides of the individual line boxes which make up the contents of the paragraph element.