html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS text-align property

Definition

The CSS text-align property allows us to align text for block-level elements, table cells and inline blocks.

Text can be aligned to the left, centre, right, justified to look like the printed page or inherited from a parent element.

Applies To

All block-level elements.

Property Values

center - The text will be aligned in the centre of the screen.

inherit - The text will inherit the alignment of its parent element.

justify - The text will be appear on the screen like printed page text.

left - The text will be aligned from the left of the screen.

right - The text will be aligned from the right of the screen.

Default Value

When no values are specified for the text-align property, text alignment is set to left or right dependant upon the default language. If the default language type is set to 'ltr', for languages that are read from left to right, the text-align property will be set to left. If the default language type is set to 'rtl', for languages that read right to left, the text-align property will be set to right.

Inheritance

The text-align property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS text-align property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS text-align Property</title>

<!-- Valid values for CSS text-align Property are:

     center, inherit, justify, left, and right.

--> 

<style type="text/css">

/* Align h1 headings in the centre */
h1 {
  text-align: center;
}

/* Align h2 headings to the left */
h2 {
  text-align: left;
}

/* Align h3 headings to the right */
h3 {
  text-align: right;
}

/* Align paragraphs to look like the printed page */
p {
  text-align: justify;
}
</style>

</head>
<body>
<h1>We Are Aligning This h1 Heading Text In The Centre Of The Screen</h1>
<p>Using justify  value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.</p>
<h2>We Are Aligning This h2 Heading Text On The Left Of The Screen</h2>
<p>Using justify  value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.</p>
<h3>We Are Aligning This h3 Heading Text On The Right Of The Screen</h3>
<p>Using justify  value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.
Using justify value of text-align to make this paragraph look like a printed page.</p>
</body>
</html>

How It Looks

The results of using the text-align property with the values above will look something like the following:

notepad
CSS table-layout    << Prev          Next >>   CSS text-decoration

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.