In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > textAlign

textAlign style property

Browser support:

Specifies or returns the horizontal alignment of the text within the element.

Aligns text only for block elements. It has the same functionality as the align property.

Syntax:

object.textAlign;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: text-align

Possible values:

The type of this property is string.

One of the following values:

-moz-center

Text is centered.

-moz-left

Text is aligned to the left.

-moz-right

Text is aligned to the right.

-webkit-auto

Language dependent align rules.

-webkit-center

Text is centered.

-webkit-left

Text is aligned to the left.

-webkit-right

Text is aligned to the right.

center

The text content of the element is centered.

end

Text is aligned to the end of the element's box.

inherit

Takes the value of this property from the computed style of the parent element.

justify

The text content of the element is justified.

left

Aligns the text content of the element to the left.

right

Aligns the text content of the element to the right.

start

Text is aligned the start of the element's box.

Default: left.

Example HTML code 1:

This example illustrates the use of the text-align property:

<head>
    <style>
        .alignLeft {
            text-align: left;
        }
        .alignCenter {
            text-align: center;
        }
        .alignRight {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="alignLeft">
        Align to left
    </div>
    <div class="alignCenter">
        Align to center
    </div>
    <div class="alignRight">
        Align to right
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the textAlign property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeTextAlign (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var alignValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.textAlign = alignValue;
        }
    </script>
</head>
<body>
    <div id="myDiv">Change textAlign!</div>

    Change textAlign value:
    <select onchange="ChangeTextAlign (this);" size="4">
        <option />left
        <option />right
        <option selected="selected" />center
        <option />justify
    </select>
</body>