Loading

Text Alignment

  • In CSS,  text alignment within an element is controlled by using the text-align property. 
  • This property allows you to specify how the text content inside an element should be aligned horizontally. 

 Values you can use for the text-align property:

  • left: This is the default value and aligns the text to the left edge of the element.
  • right: Align the text to the right side of the element.
  • center: Aligns the text to the center of the element.
  • justify: Justify the text, spreading it out to align with both the left and right edges of the element. This is often used in paragraphs and blocks of text.
  • start: This value is dependent on the document's writing direction. In a left-to-right writing direction, it is equivalent to left, and in a right-to-left writing direction, it is equivalent to right.
  • end: Also dependent on the writing direction. In a left-to-right writing direction, it is equivalent to right, and in a right-to-left writing direction, it is equivalent to left.

Syntax:

.text-left {
 text-align: left;
}
.text-right {
 text-align: right;
}
.text-center {
 text-align: center;
}
.text-justify {
 text-align: justify;
}

Example:

<html>

<head>
</head>

<body>
        <h2>Setting Text Alignment using CSS</h2>
        <p style="text-align: left;">Text Left Alignment.</p>
        <p style="text-align: right;">Text Right Alignment.</p>
        <p style="text-align: center;">Text Center Alignment.</p>
        <p style="text-align: justify; border: 2px solid red; width: 200px; height:
  100px;"> Text Justify Alignment. This alignment aligns the text based on both the margins, left and right. </p>
</body>

</html>

Output: