CSS Text Align

CSS text-align property is used to horizontally align the text in an element. For example,

h1 {
    text-align: center;
}

Browser Output

CSS Text Align Center Example Description

Here, the text-align property centers the text content horizontally within the h1 element.


Syntax of Text-Align

The syntax of the text-align property is as follows,

text-align: left | right | center | justify | initial | inherit;

Here,

  • left: aligns the text to the left (default value)
  • right: aligns the text to the right
  • center: aligns the text to the center
  • justify: the text is justified
  • initial: sets the value to the default
  • inherits: inherits the value from the parent element

Example of the Text-Align Property

Let's see an example of the text-align property,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-align</title>
    </head>

    <body>
        <p class="left">This text is aligned in the left.</p>
        <p class="center">This text is aligned in the center.</p>
        <p class="right">This text is aligned in the right.</p>
        <p class="justified">This text is justified.</p>
    </body>
</html>
/* aligns the text to left */
p.left {
    text-align: left;
}

/* aligns the text in the center */
p.center {
    text-align: center;
}

/* aligns the text to the right */
p.right {
    text-align: right;
}

/* justifies the text */
p.justified {
    text-align: justified;
}

Browser Output

CSS Text Align Example Description

Text-Align With the Inline Elements

The text-align property does not work directly with inline elements. One way to apply text-align to an inline element is by targeting the parent block-level element. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-align</title>
    </head>

    <body>
        <span class="outside">This inline element is outside.</span>
        <p>
            <span class="inside">
                This inline element is inside <p> element.
            </span>
        </p>
    </body>
</html>
/* does not work */
span {
    text-align: right;
}

/* aligns the inner span element to the right*/
p {
    text-align: right;
}

Browser Output

CSS Text Align Inline Element Example Description

Similarly, we can also apply text-align to inline-element by setting the display property of inline elements to block. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-align</title>
    </head>

    <body>
        <span class="first">This is inline element.</span><br />
        <span class="second" >This inline elements display property is set to block.</span >
    </body>
</html>
/* does not work */
span.first {
    text-align: center;
    background-color: lightgreen;
}

/* works after setting display to block */
span.second {
    display: block;
    text-align: right;
    background-color: lightgreen;
}

Browser Output

CSS Text Align Inline Element Example

Here, display: block turns the inline element span into a block-level element. This allows the text-align property to align the text to the right.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges