How to align text in CSS

To align text in CSS, you can use the text-align property. The text-align property specifies the horizontal alignment of text within its container. Here are the different values you can use:

1. text-align: left;: Aligns text to the left edge of the container (default).
2. text-align: center;: Centers the text horizontally within the container.
3. text-align: right;: Aligns text to the right edge of the container.
4. text-align: justify;: Adjusts the spacing between words to justify the text, making it align with both the left and right edges of the container.

Example:

HTML:

<p class="left-align">This text is left-aligned.</p>
<p class="center-align">This text is centered.</p>
<p class="right-align">This text is right-aligned.</p>
<p class="justified">This text is justified. It will have equal spacing between words.</p>

CSS:

.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}

.right-align {
  text-align: right;
}

.justified {
  text-align: justify;
}

In this example, we have four paragraphs with different text alignments. The text-align property is used to specify the alignment for each paragraph. The first paragraph is left-aligned, the second is centered, the third is right-aligned, and the fourth is justified.

Remember that the text-align property only affects the horizontal alignment of the text. For vertical alignment, you can use the vertical-align property (for inline or table-cell elements) or Flexbox/Grid layouts for block-level elements.

Using the text-align property, you can easily control the alignment of text elements within their containers and create well-organized and visually appealing content on your web page.