The text-align CSS property is used to control the horizontal alignment of text within a block-level element. It allows you to specify how the text content should be positioned within its container.

The text-align property accepts several values:

  • left: Aligns the text to the left edge of the container.
  • right: Aligns the text to the right edge of the container.
  • center: Centers the text horizontally within the container.
  • justify: Adjusts the spacing between words in the text so that it fills the entire width of the container. This creates a straight left and right edge.

Here’s an example:

.text-container {
  text-align: center;

In this example, the .text-container class sets the text-align property to center. This centers the text horizontally within the container.

It’s important to note that the text-align property affects the alignment of inline or inline-block elements, as well as the text content within them. It does not have any impact on the alignment of block-level elements.

Additionally, the text-align property can be overridden by more specific styles applied to child elements. For example, if you have a <p> element inside a container, and you apply text-align: center to the container, but also apply text-align: left to the <p> element, the <p> element will have left-aligned text within the centered container.

The text-align property is commonly used to control the alignment of text within headings, paragraphs, or other text-based elements. It provides flexibility in positioning and helps achieve the desired visual appearance and readability of text content.