Abakada: Back to Basics > Language References > CSS Properties > Text Properties > text-align Property

---

Sets or retrieves the horizontal alignment of text in an element.

CSS	{ text-align: 'left' | 'right' | 'center' | 'justify' }
Script	object.style.textAlign = sAlign ]

left	Inline content is aligned to the left edge of the container element.
right	Inline content is aligned to the right edge of the container element.
center	Inline content is centered within container element.
justified	Inline content is justified within container element.

The property is read/write with a default value of left; this attribute is not inherited.

The textAlign CSS property defines the horizontal alignment of inline-level content within a block element.

Since this property is inherited, all block-level objects inside a <DIV> object having textAlign=center will be centered.

The following example demonstrates the effects of applying the different values possible for the CSS text-align attribute.

 Show me 

The following examples demonstrate use of inline event handlers to dynamically set the text alignment of an element. Both methods yield the same effect.

The sample below defines text-align style attributes in an embedded stylesheet, and invokes calls to the stylesheet in response to mouse events.

<style type="text/css">
<!--
   .left { text-align: left }
   .center { text-align: center }
   .right { text-align: right }
-->
</style>
...
<p id="msg" class="left"
   onmouseover="this.className='center'"
   onclick="this.className='right'"
   onmouseout="this.className='left'">
...
</p>

 Show me 

The sample below uses inline event handlers to dynamically set an object’s text alignment in response to mouse events.

<p id="msg" onmouseover="this.style.textAlign='center'"
   onclick="this.style.textAlign='right'"
   onmouseout="this.style.textAlign='left'">
   ...
</p>

 Show me 

text-align, text-decoration, text-indent, text-justify, text-transform