CSS text-align Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-align CSS property is used to control the horizontal alignment of text within an HTML element. It allows you to specify whether the text should be aligned to the left, right, center, justified (evenly distributed across the line), or start and end edges depending on the text's writing direction (left-to-right or right-to-left). This property is particularly useful for aligning text within elements like paragraphs, headings, and divs, helping you achieve the desired visual presentation and readability of your web content.

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="test"> Eat these soft French rolls and drink some tea.</div> 

<div class="test2">Eat more of these soft French rolls and drink some tea. </div> 

<div class="test3">Eat these soft French rolls and drink some tea.</div> 

<div class="test4">Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea. Eat these soft French rolls and drink some tea.</div>

CSS

div {
   background: rgba(0, 255, 0, .1);
   margin-bottom: 10px;
}
.test {
   text-align: left; 
}
.test2 {
   text-align: center; 
}
.test3 {
   text-align: right;
}
.test4 {
   text-align: justify; 
}

Result

Editor