CSS text-align Property

Description

The text-align property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.

Initial value
start
Applies to
Block containers
Inherited
Yes
Media
Visual
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
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.textAlign

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

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
31211Yes1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes1Yes

Last updated by CSSPortal on: 2nd November 2019