CSS text-align Property

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

<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>
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; 
}

Browser Support

The following table will show you the current browser support for the CSS text-align property.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 2nd January 2024