CSS Text align

In CSS, the text-align property is used to set the horizontal alignment of text within an element. Here are the possible values and how to use them:

Syntax


selector {
  text-align: value;
}

text-align values

left: Aligns the text to the left.

right: Aligns the text to the right.

center: Centers the text.

justify: Stretches the lines so that each line has equal width, and the left and right margins are aligned.

start: Aligns text to the start of the writing mode. For left-to-right text, this is equivalent to left.

end: Aligns text to the end of the writing mode. For left-to-right text, this is equivalent to right.

Example:

1. Left Align:


p {
   text-align: left;
}

2. Right Align:


p {
   text-align: right;
}

3. Center Align:


p {
   text-align: center;
}

4. Justify Align:


p {
   text-align: justify;
}

Examples: Here is an example of a simple HTML page demonstrating the use of the text-align property:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left">This text is aligned to the left.</p>
    <p class="right">This text is aligned to the right.</p>
    <p class="center">This text is centered.</p>
    <p class="justify">This text is justified. It will stretch the lines so that each line has equal width, and the left and right margins are aligned, making the text look more uniform and neat.</p>
</body>
</html>