How to align text ( Left, Right, Center, Justify ) in using HTML CSS ?
In HTML and CSS, you can align text using the text-align property. Here's how to use each type of alignment:
1. Left Align (default)
<p style="text-align: left;">This text is aligned to the left.</p>
Or in CSS:
.left-text {
text-align: left;
}
<p class="left-text">This text is aligned to the left.</p>
2. Right Align
<p style="text-align: right;">This text is aligned to the right.</p>
Or in CSS:
.right-text {
text-align: right;
}
<p class="right-text">This text is aligned to the right.</p>
3. Center Align
<p style="text-align: center;">This text is centered.</p>
Or in CSS:
.center-text {
text-align: center;
}
<p class="center-text">This text is centered.</p>
4. Justify Align
<p style="text-align: justify;">
This text is justified. It means the lines of the text are stretched so that each line has equal width.
</p>
Or in CSS:
.justify-text {
text-align: justify;
}
<p class="justify-text">
This text is justified. It makes both the left and right sides of the paragraph align nicely.
</p>
Notes:
text-align works on inline-level content inside block-level elements (like <p>, <div>, etc.).
justify works best with longer paragraphs of text.
- Log in to post comments