css
  1. css-text-align
PreviousNext

CSS Text Align

The text-align property in CSS determines the horizontal alignment of text within its container. It's used to adjust the positioning of text elements.

Basic Usage of the text-align Property

The text-align property can take several values:

  • text-align: left;: Aligns text to the left of the container.
  • text-align: right;: Aligns text to the right of the container.
  • text-align: center;: Centers text horizontally within the container.
  • text-align: justify;: Justifies the text, creating even spacing between words to align both the left and right edges.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .aligned-text {
    text-align: center;
  }
</style>
</head>
<body>

<p class="aligned-text">This text is centered within its container.</p>

</body>
</html>
Try Playground

Benefits of Using text-align Property

  • Text Positioning: Allows for easy positioning of text within its container.
  • Visual Balance: Aids in creating a balanced and visually appealing layout.

Best Practices for Using text-align

  • Context Consideration: Choose the alignment that best suits the content and the overall design of the page.
  • Readability: Ensure the chosen alignment enhances readability and complements the design.

Understanding and utilizing the text-align property provides control over the horizontal positioning of text elements, contributing to a well-structured and visually pleasing layout in web design.

Line HeightText Decoration
Published on: