🎯 CSS text-align Property (Horizontal Text Alignment)

The text-align property in CSS defines how text is aligned horizontally inside an HTML element.

It controls whether text is aligned to the left, right, center, or justified across both sides of a container.

p {
  text-align: center;
}
                

➡️ In this example, the text inside the paragraph is centered horizontally.

Aligns text to the left side of the container.

p {
  text-align: left;
}
                

➡️ This is the default alignment in most web browsers.

Aligns text to the right side of the container.

➡️ Commonly used for dates, signatures, or design layouts.

Centers the text horizontally inside the element.

p {
  text-align: center;
}
                

➡️ Often used for headings, titles, and hero sections.

Aligns text evenly on both left and right edges.

➡️ Creates a clean newspaper-style paragraph layout.

p {
  text-align: justify;
}
                

Resets the alignment to the browser’s default value (usually left).

The element inherits the text alignment from its parent element.