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

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

leftalign left in each line box
rightalign right in each line box
centeralign center in each line box
justifystrech spaces so that first word aligns left and last word aligns right. This way all line boxes have same with (execept last one).
inheritinherit 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
.box {
  width: 200px; 
  background-color: lightgreen;
  text-align: left;
<div class="box">
This is some text which is inside a block element. It is created to see behaviour of property text-align.
text-align refresh



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments