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

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