CSS text-align - align text left, right or justify

CSS text-align – align text left, right or justify

on Mar 21, 2016

CSS property text-align specifies how the inline-level content of a block is aligned along the inline axis. Note that text-align will also affect inline and inline-block elements in addition to text.

CSS property text-align

CSS version:	CSS 2.1
Value:	left \| right \| center \| justify \| inherit
Initial:	left if direction is ltr, right if direction is rtl
Applies to:	block containers
Inherited:	yes
Percentages:	N/A
Animatable:	no

text-align values

left	align left in each line box
right	align right in each line box
center	align center in each line box
justify	strech spaces so that first word aligns left and last word aligns right. This way all line boxes have same with (execept last one).
inherit	inherit value from parent container

Examples – left, right and justify text-align

In the following code, CSS property text-align can be changed to the following values

left
right
justify

<style> 
.box {
  width: 200px; 
  background-color: lightgreen;
  text-align: left;
}
</style>
<div class="box">
This is some text which is inside a block element. It is created to see behaviour of property text-align.
</div>

text-align refresh

try it online