CSS text-align

Previous Next

Demo of the different values of the text-align property.

Click the property values below to see the result:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

Align Me!

This example demonstrates different text-align values.
Have fun!

For longer texts, notice that text-align: justify aligns each line so that they look excactly the same width:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Align Me!

This example demonstrates different text-align values.
Have fun!

For longer texts, notice that text-align: justify aligns each line so that they look excactly the same width:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Align Me!

This example demonstrates different text-align values.
Have fun!

For longer texts, notice that text-align: justify aligns each line so that they look excactly the same width:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Align Me!

This example demonstrates different text-align values.
Have fun!

For longer texts, notice that text-align: justify aligns each line so that they look excactly the same width:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯