CSS text-align Property

February 10, 2021 12:37 pm IST

You are Here:

CSS text-align Property

CSS text-align property sets the horizontal alignment of text in an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p:nth-child(2){ text-align: left; } p:nth-child(3){ text-align: center; } p:nth-child(4){ text-align: justify; } p:nth-child(5){ text-align: right; } </style> </head> <body> <h1>CSS text-align Property</h1> <p>This is a paragraph with text-align left.</p> <p>This is a paragraph with text-align center.</p> <p>This is a paragraph with text-align justify.</p> <p>This is a paragraph with text-align right.</p> </body> </html>

Run

Syntax

Using CSS

element{ text-align: center; }

Using Javascript

object.style.textAlign="center";

Animatable

No, text-align property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-align property is left.

Property Value

The following table provides a list of values for CSS text-align property.

Value	Explanation
left	Aligns the text to the left.
center	Aligns the text to the center.
justify	The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
right	Aligns the text to the right.

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-align property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS text-align Property</h1> <p>This is a paragraph</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.textAlign = "center"; } </script> </body> </html>

Run