Codestin Search App

Description

The text-align property controls the horizontal alignment of inline content inside a block container. It affects where text runs and inline-level boxes (like inline-block and replaced inline elements such as images) are placed within the container’s content area, shaping the flow and visual rhythm of lines. Because it targets inline content, it does not move block-level boxes themselves; block-level children remain laid out according to the block formatting context unless other layout properties intervene.

In practical terms, text-align is often set on a parent block so all descendant inline content inherits that alignment, making it a convenient way to establish consistent line alignment across headings, paragraphs, and inline elements. Some layout contexts treat it specially: table cells, for example, use this property to align cell contents, and nested block containers will inherit the computed value so that inner text continues the same alignment unless explicitly overridden. When content contains multiple inline boxes or forced line breaks, the property determines how each line's inline content is positioned within the available inline progression dimension.

This property interacts with several other text and layout controls. For language-direction and mirrored layouts you will often use direction to influence which side is considered the start or end of a line. Handling the final line of a paragraph (which can behave differently from intermediate lines) can be refined with text-align-last, while full-line justification behavior is influenced by text-justify. How and whether lines wrap at all affects alignment outcomes, so white-space plays a role, and visual density or spacing between baselines (which changes how aligned lines look relative to one another) is affected by line-height.

When applying text-align in real layouts, remember it’s primarily a typographic tool rather than a general-purpose layout mechanism. It’s ideal for controlling line composition and the alignment of inline content inside boxes, but aligning entire boxes or grid/flex items is handled by other layout properties. Use text-align to establish readable, consistent text flow, and combine it deliberately with the related text properties above when you need finer control over wrapping, justification, and behavior in different writing directions.

Definition

Initial value: start
Applies to: Block containers
Inherited: Yes
Computed value: As specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
Animatable: No
JavaScript syntax: object.style.textAlign

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

text-align: start | end | left | right | center | justify | match-parent | start end

Values

startInline-level content is aligned to the start edge of the line box.
endInline-level content is aligned to the end edge of the line box.
leftInline-level content is aligned to the left edge of the line box.
rightInline-level content is aligned to the right edge of the line box.
justifyThe text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
centerInline-level content is centered within the line box.
match-parentSimilar to inherit with the difference that the value start and end are calculated according the parents direction and are replaced by the adequate left or right value.
start endSpecifies start alignment of the first line and any line immediately after a forced line break; and end alignment of any remaining lines.
inherit

Example

HTML

<div class='container'>

    <h1 class='center'>Centered Heading</h1>

    <p class='left'>This paragraph is left-aligned. Text-align left is the default for most left-to-right languages.</p>

    <p class='center'>This paragraph is center-aligned. Use text-align: center to horizontally center inline content within its container.</p>

    <p class='right'>This paragraph is right-aligned. Right alignment is useful for timestamps, signatures, or right-to-left languages.</p>

    <p class='justify'>This paragraph is justified. Justified text aligns both the left and right edges by adjusting spacing between words, creating a clean block of text across the container width.</p>

    <div class='note'>

        <p class='center'>Inline elements inherit alignment  -  <a href='#'>links</a>, <strong>bold text</strong>, and <em>emphasis</em> follow the same alignment.</p>

    </div>

</div>

CSS

body {
    margin: 0;
    padding: 20px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: #f7f7f7;
    color: #222;
}

.container {
    max-width: 720px;
    margin: 40px auto;
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

h1.center {
    font-size: 1.6rem;
    margin-bottom: 12px;
    text-align: center;
}

p {
    margin: 12px 0;
    line-height: 1.6;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}

.note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-align property. Hover over a browser icon to see the version that first introduced support for this CSS property.