text-align

value: left | right | center | justify | inherit
initial value: left for left to right languages and vice versa
inherited: yes
percentages: N/A
applicable to: block containers

The text-align property sets how inline level content of block containers is aligned within the block. This property is generally used to set if text is aligned to the left or right, but can be used for other situations as well. The text will still sit inside the padding for the box.

  • left: the text will align along the left side of the block element and be jagged along the right side
  • right: the right edge of the text will align on the right side of the block element and be jagged on the left side
  • center: the text will align down the center line of the block and be jagged on the left and right side.
  • justify: the text will spread across the block element to have a smooth edge on the left and right side, but the spacing between the words will not be equal from line to line.

If the HTML for the page is set to read left-to-right, ltr, the default text-align value is left. If the HTML for the page is set to read right-to-left, the default value will be right.


Example:

p.justleft {text-align: left}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.


Example:

p.justright {text-align: right}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.


Example:

p.justcenter {text-align: center}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.


Example:

p.justboth {text-align: justify}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.


The text-align property in use with tables

When formatting a <table> element, the text-align property will set how the text is aligned within each <td> or table cell. For table cells there is also the vertical-align property that will set if the text is aligned at the top, middle or bottom of each cell.

leftrightcenterjustify
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.