CSS text-align Property

09 Nov, 2021
The text-align property in CSS is used to specify the horizontal alignment of text in an element ie., it is used to set the alignment of the content horizontally, inside a block element or table-cell box.
Syntax:
text-align: left|right|center|justify|initial|inherit;
Default Value : left if direction is ltr, and right if direction is rtl
Property Value:
left: It is used to set the text-alignment into left. This is the default property.
right: It is used to set the text-alignment to right.
center: It is used to set the text-alignment into the center.
justify: It is used to spreads the words into the complete line i.e., by stretching the content of an element.
initial: It is used to set an element’s CSS property to its default value.
inherit: It is used to inherit a property to an element from its parent element property value.
Please refer to the CSS Align article for further details.
Example: This example illustrates the use of the text-align property, in order to align it to specified values.
HTML
<!DOCTYPE html><html><head>    <title>text-align property</title>    <style>    h1 {        color: green;    }         .main {        border: 1px solid black;    }         .gfg1 {        text-align: left;    }         .gfg2 {        text-align: right;        ;    }         .gfg3 {        text-align: center;    }         .gfg4 {        text-align: justify;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>    <h2>text-align property</h2>    <div class="main">        <h3>text-align: left;</h3>        <div class="gfg1">        The course is designed for students        as well as working professionals to        prepare for coding interviews. This        course is going to have coding questions        from school level to the level needed        for product based companies like Amazon,        Microsoft, Adobe, etc.        </div>    </div>    <br>    <div class="main">        <h3 style="text-align: right;">text-align: right;</h3>        <div class="gfg2">        The course is designed for students        as well as working professionals to        prepare for coding interviews. This        course is going to have coding questions        from school level to the level needed        for product based companies like Amazon,        Microsoft, Adobe, etc.        </div>    </div>    <br>    <div class="main">        <h3 style="text-align: center;">text-align: center;</h3>        <div class="gfg3">        The course is designed for students        as well as working professionals to        prepare for coding interviews. This        course is going to have coding questions        from school level to the level needed for        product based companies like Amazon,        Microsoft, Adobe, etc.        </div>    </div>    <br>    <div class="main">        <h3 style="text-align: justify;">text-align: justify;</h3>        <div class="gfg4">        The course is designed for students        as well as working professionals to        prepare for coding interviews. This        course is going to have coding questions        from school level to the level needed        for product based companies like Amazon,        Microsoft, Adobe, etc.        </div>    </div></body></html>
Output: 
Supported Browsers: The browser supported by the text-align property are listed below: 
Google Chrome 1.0
Internet Explorer 3.0
Microsoft Edge 12.0
Firefox 1.0
Opera 3.5
Safari 1.0
arorakashish0911
bhaskargeeksforgeeks
hritikbhatnagar2182
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?