CoderTools Web site

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.
HTML & CSS Editor with FTP / FTPS

Examples for text-align

Example 1:

A right align text within a table cell:

cell1 cell2
    <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:

cell1 cell2
    <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


Name Values Description
text-align left
center
right
justify
inherit
Use the text-align property to horizontally align text within block level html elements.

-->

TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

12/18/2014 5:11:03 PM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP