The text-align property

In CSS, you can control the alignment of text much like you can in a word processor like MS Word. This is done using the text-align property, which has several different values. The most commonly used ones allow you to adjust the text to the left, the right or the center. Here's an example:

<p style="text-align: left;">Left aligned text</p>
<p style="text-align: center;">Center aligned text</p>
<p style="text-align: right;">Right aligned text</p>

Left is the default, so we may as well omit that, but I have included it in the example for consistency. You may also need it to revert to left aligned text, since this is inherited from the parent element, as illustrated with this example:

<div style="text-align: center;">
	This div element contains centered text
	<div style="text-align: left;">
		but also left aligned text!
	</div>
</div>

As you can see, we specifically instruct the second div element to use left alignment - if we didn't do that, the text in this element would be centered, because it inherits it from the parent div element.

Align justify

Besides the ability to align text to the left, center or right, the text-align property comes with a possible value called justify. If you use this option, the browser will try to make all lines of text within the element the same length, usually by adjusting the amount of space between each word. This layout is very commonly seen in newspapers and magazines and is usually implemented to improve readability. Here's an example of the justify option in action:

<p style="text-align: justify; width: 200px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lectus mattis, consequat mi vitae, tristique ipsum. In hac habitasse platea dictumst. Integer sit amet aliquet dolor.
</p>

When testing this example, you should see that all lines of the text within the paragraph line up on the left and the right side. You might also see why this is not always used - the amount of whitespace being added can be quite high, resulting in some strange looking lines.

Summary

With the text-align property, you can very easily define alignment for your text elements. The most commonly used values are left, right and center, but the justify option can also come in handy in some cases where you want the lines to align in both ends.