Text Alignment in CSS

CSS short for Cascading Style Sheets is used to manipulate elements of a web page written in HTML or XML to enhance its appearance. CSS consists of a vast range of properties that are used to modify an element’s color, size, alignment, etc. This article, however, is designed to enlighten its readers regarding the property that aids in aligning text on a web page.

Text Alignment in CSS

To align your text using CSS, the text-align property is used. This property aligns the horizontal text. A text can be aligned in the following different ways;

Left
Right
Center
Justified

If the text direction is from left-to-right then the text will be aligned left by default, and if the text direction is from right-to-left then the text will be aligned right by default.

How to left align text

To align text to the left, set the value of text-align property as left. The following example shows left alignment of text.

<!DOCTYPE html>
<html>
<head>
<style>
#div {
text-align: left;
border: 2px solid black;
padding: 10px;
background-color: pink;

}
</style>
</head>
<body>

<div id="div">This text is left aligned.</div><br>

</body>
</html>

Output

The alignment of the text has been set to left.

How to right align text

In order to align text to the right, set the value of text-align property as right. The following example shows right alignment of text.

<!DOCTYPE html>
<html>
<head>
<style>
#div {
text-align: right;
border: 2px solid black;
padding: 10px;
background-color: pink;

}
</style>
</head>
<body>

<div id="div">This text is right aligned.</div><br>

</body>
</html>

Output

The text has been right aligned.

How to center align text

In order to align text to the center set the value of text-align property as center. The following example shows center alignment of text.

<!DOCTYPE html>
<html>
<head>
<style>
#div {
text-align: center;
border: 2px solid black;
padding: 10px;
background-color: pink;
}
</style>
</head>
<body>

<div id="div">This text is center aligned.</div><br>

</body>
</html>

Output

The text has been center aligned.

How to justify text alignment

In order to justify text alignment set the value of the text-align property as justify. When you justify the text alignment, each line is stretched to have the same width, moreover, the margins (left and right) are set straight. The example below demostrates justified text alignment.

<!DOCTYPE html>
<html>
<head>
<style>
#div {
text-align: justify;
border: 2px solid black;
padding: 10px;
background-color: pink;
}
</style>
</head>
<body>

<div id="div">This text alignment is justified.</div><br>

</body>
</html>

Output

The text alignment has been justified.

Now, we sometimes come across situation where we want to align some piece of text instead of the whole text. Let’s suppose you want to align the last line of the text and for that, the text-align-last property is used.

Text Align Last Property

As already mentioned this property is used align the last line of the text.

Example
In the following example, we are justifying the alignment of the last line of the paragraph.

<!DOCTYPE html>
<html>
<body>

<p style="text-align-last: justify;">CSS short for Cascading Style Sheets is used to manipulate elements of a web page written in HTML or XML to enhance its appearance. CSS consists of a vast range of properties that are used to modify an element's color, size, alignment, etc. </p>

</body>
</html>

Output

The last line of the paragraph is justified.

Conclusion

Using the text-align property of CSS you can adjust alignment of your text in an HTML document. The text on a web page can be aligned in four different ways that are; left, right, center and justified. Moreover, text-align-last property is used to align the line of a paragraph. This write-up highlights the text-align property of CSS in depth with the help of appropriate examples.

Text Alignment in CSS