CSS Align Text - text-align
Description
Use the text-align property to horizontally align text within block level html elements.
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
text-align: inherit;
See also: text-decoration, text-indent, text-transform, white-space.
Examples for text-align
Example 1:
A right align text within a table cell:
<style>
#table1 { width:100%; height:75px; }
#table1 td { width:50%; border:1px solid black; text-align: right; }
</style>
<table id="table1">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
Example 2:
A center align text within a table cell:
<style>
#table2 { width:100%; height:75px; }
#table2 td { width:50%; border:1px solid black; text-align: center; }
</style>
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
Example 3: Justification
An example with no justified text - i.e. the default setting. The thing to note here is the lines end before the edge of the element so depending on where the browser decides to wrap the text you could have large or small spaces at the end of each line:
An example with no justification! An example with no justification! An example with no justification! An example with no justification!
An example with no justification! An example with no justification! An example with no justification! An example with no justification!
Definitely no justification! Definitely no justification! Definitely no justification! Definitely no justification! Definitely no justification!
Now with the justification - note that the letter and word spacing is adjusted by the browser so that the words end at the edge of the element similar to the formatting of newsprint and books:
An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div.
An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div.
<style>
#div_no_justify { border:1px solid gray; height:75px; }
#div_justify { border:1px solid gray; height:75px; text-align: justify; }
</style>
<div id="div_no_justify">
An example with no justification! An example with no justification! An example with no justification! An example with no justification!
An example with no justification! An example with no justification! An example with no justification! An example with no justification!
Definitely no justification! Definitely no justification! Definitely no justification! Definitely no justification!
Definitely no justification!
</div>
<br/>
<div id="div_justify">
An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div.
An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div. An example to show justified text within a div.
An example to show justified text within a div.
</div>
Values for text-align
| text-align |
left
center
right
justify
inherit |
Use the text-align property to horizontally align text within block level html elements. |