Align text in HTML and CSS

Align text in HTML and CSS

In English, most European languages and on the World Wide Web, text is usually left-aligned. In languages that read text right-to-left, text is commonly right-aligned. Right-aligned text is also used for attributions to authors, quotes, text associated with an image, … Text can also be center aligned: symmetrically aligned. This is often used for titles, headlines, flyers, signs, poems and songs. Another common type of text alignment is justification, where text is both aligned at the left and right. Justification implies that lines are stretched so that each line has an equal width. You often see this in print media; in newspapers and magazines. Justification can also be used to give a large document like a thesis or your company website a more professional and clean look.

You have the possibility to align text in HTML and CSS in these mentioned ways. We show you how in this tutorial.

Align text in HTML:

<p> style="text-align:left">This text is left-aligned.</p>

<p> style="text-align:center">This text is center-aligned.</p>

<p> style="text-align:right">This text is right-aligned.</p>

<p> style="text-align:justify">This text is stretched so that each line has an equal width.</p>

Align text in CSS:

align-left {
    text-align: left;
}

align-center {
    text-align: center;
}

align-right {
    text-align: right;
}

align-justify {
    text-align: justify;
}

Example:

This text is left-aligned.

This text is center-aligned.

 This text is right-aligned.

This text is justified. All the lines in the justified text are stretched so that each line has an equal width. The text thus fills the space exactly and is aligned both left as right (except on the last line), even if this means stretching a bit to a lot at times.