Open In App

CSS text-align Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 09 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads