CSS Text-align

The text-align property in CSS is used to specify the horizontal alignment of text within an element. It controls how inline content (like text) is aligned in its containing block.

Syntax

element {
    text-align: left | right | center | justify | start | end | inherit;
}

Try It Now

Property Values

  • left: Aligns the text to the left. This is the default alignment in left-to-right (LTR) languages.
  • right: Aligns the text to the right. Common in right-to-left (RTL) languages.
  • center: Centers the text within its container.
  • justify: Distributes the text evenly across the width of the container, aligning both the left and right edges. It adds space between words to make the text block flush with both margins.
  • start: Aligns the text to the start of the container, respecting the text direction (left for LTR and right for RTL).
  • end: Aligns the text to the end of the container, respecting the text direction.
  • inherit: Inherits the text alignment from the parent element.

Examples

Example 1: left Alignment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-align: left;
        }
    </style>
</head>
<body>
    <p>This text is aligned to the left.</p>
</body>
</html>

Try It Now

Example 2: right Alignment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-align: right;
        }
    </style>
</head>
<body>
    <p>This text is aligned to the right.</p>
</body>
</html>

Try It Now

Example 3: center Alignment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <p>This text is centered.</p>
</body>
</html>

Try It Now

Example 4: justify Alignment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p>This text is justified. It is aligned to both the left and right margins, adding extra space between words as necessary.</p>
</body>
</html>

Try It Now

Use Cases

  • left: Common for most Western languages, where text reads left to right.
  • right: Used in languages that read right to left, such as Arabic or Hebrew.
  • center: Useful for headings, titles, or for visually centering short blocks of text.
  • justify: Often used in newspapers, magazines, and books to create a clean and formal appearance by aligning text to both margins.

Tips

  • Use text-align: justify cautiously, as it can sometimes create awkward spaces between words.
  • Remember that text-align only affects the inline content inside a block element, not the block element itself.
  • Use start and end for more flexible and language-sensitive alignments, especially in multi-language websites.

The text-align property is essential for controlling the visual presentation of text and ensuring readability and aesthetic alignment in your web pages.