Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

text-align property

Specifies whether the text in the object is left-aligned, right-aligned, centered, or justified.

CSS 2.1, Section 5.4.6

Syntax

text-align: left | right | center | justify

Property values

A variable of type String that specifies or receives one of the following values:

left

Default. Text is aligned to the left.

right

Text is aligned to the right.

center

Text is centered.

justify

Text is justified.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Remarks

The property applies to block elements. The property is inherited by all block-level objects inside a div object. This parameter receives null if the attribute is not set.

The justify possible value is available as of a Windows Store app using JavaScript.

Examples

The following examples use the text-align attribute and the text-align property to align text within the object.

This example uses p as a selector and two classes to call an embedded style sheet that aligns the text according to the respective rule.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/text-align.htm


<!DOCTYPE html>
<html>

<head>
  <title>text-align</title>
  <style>
    p {
      text-align: center;
    }

    .align1 {
      text-align: right;
    }

    .align2 {
      text-align: left;
    }
  </style>
</head>

<body>
  <p onclick="this.className='align1'" ondblclick="this.className='align2'">
    The text is aligned to the center using <strong>p</strong> as<br>
    the HTML selector in the stylesheet.<br>
    Click the text to align right.<br>
    Double-click to align left.
  </p>
</body>

</html>

This example uses inline scripting to change the alignment of the text when an onmouseover event occurs.


<!DOCTYPE html>
<html>

<head>
  <title>textAlign</title>
</head>

<body>
  <p style="font-size: 14pt" onmouseover="this.style.textAlign='center'" 
       onclick="this.style.textAlign='right'" 
       ondblclick="this.style.textAlign='left'">
    Run your mouse over me to<br>
    center the text.<br>
    Click to make me align to the right.<br>
    Double-click to align left.
  </p>
</body>

</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show:
© 2014 Microsoft