CSS text-align

The CSS text-align property is used to control the horizontal alignment of text content within its container. It applies to block-level elements and can be used to align text to the left, right, center, or justified within the container.

The syntax for the text-align property is as follows:

selector {
  text-align: value;
}

• selector: Represents the HTML element or class to which the text-align property will be applied.
• value: Specifies the horizontal alignment of the text. It can take one of the following values:
• left: The text is aligned to the left edge of the container. This is the default value for most elements.
• right: The text is aligned to the right edge of the container.
• center: The text is centered within the container.
• justify: The text is stretched to occupy the full width of the container. Spaces between words are adjusted to create even left and right margins. Note that justify alignment affects only block-level elements, not single lines of text.

Example:

p {
  text-align: center;
}

In this example, all paragraphs (<p> elements) will have their text centered within their respective containers.

The text-align property is commonly used to control the alignment of text blocks, headings, and other text-containing elements within a layout. By using different values of text-align, you can create various alignment styles to suit your design needs.

Keep in mind that the text-align property only affects the horizontal alignment of the text. To control vertical alignment or the positioning of inline elements, you may need to use other CSS properties, such as vertical-align, line-height, or positioning properties like display and float.

Additionally, text-align does not have an effect on inline elements that are not contained within block-level elements. For inline elements, you can use text-align on their parent block-level element to control their alignment.

Always test your styles across different browsers and devices to ensure consistent alignment and layout of text content in your web pages.