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.
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:
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.
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.
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.