HTML - DOM Style Object textAlign Property

Quiz

HTML DOM Style Object textAlign property sets or returns the horizontal alignment of text content inside block level element.

Syntax

Set the textAlign property:

object.style.textAlign= "left | right | center | justify | initial | inherit";

Get the textAlign property:

object.style.textAlign;

Property Values

Value	Description
left	It is the default value which aligns the text to left side.
right	It aligns the text to right side.
center	It aligns the text to center.
justify	It set the text alignment to justify.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the horizontal alignment of text inside the element.

Example of HTML DOM Style Object 'textAlign' Property

The following example sets the alignment of p element inside div element to right, center and justify.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object align Property
    </title>
    <style>
        #align {
        border: 1px solid #04af2f;
    }
    </style>
</head>
<body>
    <p>Click to change text alignment.</p>
    <button onclick="fun()">Right Align</button>
    <button onclick="funTwo()">Center Align</button>
    <button onclick="funThree()">Justify Align</button>
    <div  id="align">
        <p>
            JavaScript is a lightweight, interpreted 
            programming language. It is commonly used
            to create dynamic and interactive elements
            in web applications. JavaScript is very easy
            to implement because it is integrated with 
            HTML. It is open and cross-platform.
            This JavaScript tutorial has been designed 
            for beginners as well as working professionals 
            to help them understand the basic to advanced 
            concepts and functionalities of JavaScript. 
            It covers most of the important concepts 
            related to JavaScript such as operators, control
            flow, functions, objects, OOPs, Asynchronous 
            JavaScript, Events, DOM manipulation and much more.
        </p>   
    </div>       
    <script>
        function fun(){
            document.getElementById("align")
                .style.textAlign="right"
        }
        function funTwo(){
            document.getElementById("align")
                .style.textAlign="center"
        }
        function funThree(){
            document.getElementById("align")
                .style.textAlign="justify"
        }
    </script>
</body>
</html>

Supported Browsers

Property
textAlign	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page