CSS text-align Property

Learn about the CSS text-align Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 09, 2022

Different elements are added to make aesthetic websites. Just adding elements alone won't work, we need to make sure all the elements are positioned in the correct places also. We define the text-align property which serves the purpose of text alignment. Let's discuss this property in detail.

What is CSS text-align Property?

The text-align property is used to align text horizontally in HTML. The default value is left.

Syntax:

text-align: center| end| justify| initial| inherit| left| right

Quick overview of the syntax used,

Value	Explanation
center	Text is positioned at the center.
end	Text is positioned at the end (inside a div).
justify	Spreading the words into the complete line.
left	Default value. Text- Alignment to left.
right	Text- Alignment to right.
initial	Specifies that the value is set by the browser.
inherit	Inherits this property from its parent element.

The example given below illustrates CSS text-align Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>text-align property</title>
   </head>
   
   <style>
      h1{
      border: 2px solid brown;
      text-align: center;
      }
   </style>
   
   <body>
      <h1> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, error.</h1>
   </body>
</html>

Output:

We have injected the CSS text-align property. The text is centered within the line box since the property value is set to center.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>text-align property</title>
   </head>
   
   <style>
      .container h1{
      background-color: aqua;
      text-align: end;
      }
      h2{
      text-align: center;
      }
   </style>
   
   <body>
      <div class="container">
         <h1>Welocme to IncludeHelp</h1>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSG_hqEQ-ZCT-rGtOSajeJA7sT5cDv
            KkcGBtA&usqp=CAU">
         <h2>"Become an expert in Computer Programming Languages"</h2>
      </div>
   </body>
</html>

Output:

We have injected the text-align property for both <h1> and <h2> elements. The property values are set to end and center for these elements.

CSS Tutorial & Examples »

The outline Property in CSS

CSS visibility Property

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples