CSS Text Alignment

Text alignment is specified by using the property text-align. It only works on block level elements i.e. the elements that add line break around themselves like h1, p, img etc.

Property Values

The possible values are as follows:

Values Description
right It aligns the text along the right side.
left Default value. It aligns the text along the left side.
center It aligns the contents to the center within the line box.
justify It specifies the text as justify in order to exactly fill the line box.

Text Alignment Example

Below example will demonstrate the basic architecture of Text Alignment

Align text to right
p {
  float: right;
}


Align text to left
p {
  float: left;
}


Align text as center
p {
  float: center;
}


Align text as justify
p {
  float: justify;
}


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="float: center;">Learn CSS from PHPDocs.</p>
    </body>

</html>