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 valuestart
  • Applies toBlock containers
  • InheritedYes
  • MediaVisual
  • Computed valueAs 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
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript
Formal syntax: start | end | left | right | center | justify | match-parent | start end 

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;
text-align: start-end;
  • 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
.class {
   text-align: center;

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.