CSS-Text-Alignment
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: