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:

CSS text-align Property | Example 1

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:

CSS text-align Property | Example 2

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 »




Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.