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
3	12	1	1	3.5	1
Tablets / Mobile
≤37	18	4	10.1	1	1.0

Last updated by CSSPortal on: 2nd November 2019