CSS text-align Property – Setting Horizontal Alignment for Text and Inline Content

Definition and Usage

The text-align property sets the horizontal alignment of text and inline content within block containers and table-cell elements.

Using this feature, you can easily set the horizontal alignment of text.

Basic Example

The text-align property sets the horizontal alignment of text, while the vertical-align property is used to set vertical alignment.

Formal Syntax

Values

Accepted values for the text-align property
`left`	Inline content is aligned with the left edge of the line box. (In vertical writing modes, this can correspond to either the physical top or bottom, depending on the `writing-mode`.)
`right`	Inline content is aligned with the right edge of the line box. (In vertical writing modes, this can correspond to either the physical top or bottom, depending on the `writing-mode`.)
`start`	The alignment depends on the value of the `direction` property: If the value is `ltr`, it is the same as `left`. If the value is `rtl`, it is the same as `right`.
`end`	The alignment depends on the value of the `direction` property: If the value is `ltr`, it is the same as `right`. If the value is `rtl`, it is the same as `left`.
`center`	Inline content is centered within the line box.
`justify`	Inline content is aligned according to the `start` value. For text content, lines are stretched to fill the line box, ensuring that the text is aligned with both the left and right edges except for the last line.

Syntax

CSS

/* Keyword values */
text-align: left;
text-align: right;
text-align: start;
text-align: end;
text-align: center;
text-align: justify;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

Formal Definition

Formal definition of the text-align Property
Initial value	The `start` value. In browsers that do not support the `start` value, the alignment depends on the value of the `direction` property: If the value is `ltr`, it behaves as `left`. If the value is `rtl`, it behaves as `right`.
Applies to	block containers
Inherited	yes
Animatable	no

Things to Keep in Mind

There are several important considerations to keep in mind when using the text-align property.

Consider Accessibility When Using `text-align: justify`

Justified text can create inconsistent spacing between words, which can pose significant readability challenges for individuals with cognitive conditions such as dyslexia. Special care should be taken on narrow viewports, such as mobile devices.

Understanding How `text-align: justify` Aligns Unfilled Line Boxes

It is common to mistakenly assume that text-align: justify will always distribute text evenly across the entire width of a line, similar to how "Full Justification" works in word processors like Microsoft Word.

However, with text-align: justify, inline content is primarily aligned according to the start value. Text only stretches to fill the line box—aligning with both the left and right edges—when the content is long enough to require a line break.

The `text-align` Property Aligns Content Within the Horizontal Area of an Element

Let’s look at the following example.

In the example above, you might expect the text to be centered. However, the result appears unchanged, which can be confusing.

This is actually a common visual misconception. It may look as if text-align: center is not working, but the property is being applied correctly. Let’s look at another example to see why.

text-align: center Adding a Background Color

<style>
    span {
        text-align: center;
        background-color: yellowgreen;
    }
</style>
<span>text-align: center;</span>

In this example, the background color reveals the actual area occupied by the element. The text-align property sets alignment within the horizontal area of the element itself.

In other words, while the <span> element correctly attempts to center its content, the width of the <span> is exactly the same as the width of the text it contains. Because there is no "extra" space within the element, the centering effect is not visible.

Practical Examples

Let's look at some practical examples of how the text-align property can be used in real-world scenarios.

Centering an Image Horizontally

It is important to remember that the text-align property sets the horizontal alignment of not just text, but all inline-level content.

The following example demonstrates how to center an image (which is an inline-level element) within its container using the text-align property.

CSS

.container {
    background-color: orange;
    text-align: center; /* Aligns inline-level descendants (text, images, etc.)                
                           within the horizontal space of the container */
}
.image {
    width: 200px;
    vertical-align: top;
}

Tips: Centering Images with CSS

Styling Input Boxes

You can also use the text-align property to center text within input fields. This is often used for search bars or focused UI elements.

HTML

<style>
[type="text"] {
    padding: 0.5em;
    outline: none;
    border: none;
    border-bottom: 2px solid;
    text-align: center;
    transition: all 0.3s; /* Centers the input text and placeholder */
    width: 300px;
}
[type="text"]:focus {
    border-color: #006466;
    background-color: rgba(0, 116, 117, .1);
}
[type="text"]::placeholder {
    transition: opacity 0.3s;
}
[type="text"]:focus::placeholder {
    opacity: 0;
}
</style>
<input type="text" placeholder="Type here...">

CSS ::placeholder for Styling Placeholder Text

Browser Compatibility

Browser compatibility for the text-align property
Property	Desktop Chrome	Desktop Edge	Desktop Firefox	Safari
`text-align`	Yes	Yes	Yes	Yes

Specifications

Specification for the text-align property
Specification
`text-align`	CSS Text Module Level 3 #text-align-property

References

MDN - text-align