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