Here is my HTML code. Sometimes I want to align the text inside the p tag to left or right or sometimes center. How can I align text in CSS using the text-align property?
<div class="container">
<p>Hello, Welcome</p>
</div>
Certainly! You can use the text-align property in CSS to control the horizontal alignment of text within an element. Here are the different values you can use for the text-align property:
Left Alignment (Default):
Right Alignment:
The text aligns along the right side of the container.
Example:
CSS p {
text-align: right;
}
Center Alignment:
The text centers between the left and right edges of the container.
Example:
CSS p {
text-align: center;
}
Justified Alignment:
Each line of text is stretched so that every line has equal width, and the left and right margins are straight (similar to how text appears in magazines and newspapers).
Example:
CSS
p {
text-align: justify;
}
Choose the appropriate value for your specific alignment needs, and apply it to the <p> tag within your HTML code. For instance, if you want the text inside your <p> tag to be centered, use the following CSS rule:
CSS
p {
text-align: center;
}
Feel free to adjust the alignment as needed based on your design requirements
To align text inside a `<p>` tag in CSS, you can use the `text-align` property.
css
.container p {
text-align: left; /* or right, center */
}