CSS text-align

The CSS text-align property is used to align the text horizontally. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{text-align: right;}
   </style>
</head>
<body>

   <div class="myd">
      <h2>text-align: right</h2>
   </div>
   
</body>
</html>

Output

text-align: right

CSS text-align Syntax

The syntax of text-align property in CSS, is:

text-align: x;

The value of x should be any of the following:

left - used to align the text to left
right - used to align the text to right
center - used to align the text to the center
start - used to align the text to the start/begin. That is, align the text to the left, if the direction is defined as ltr (left to right), or to the right, if the direction is defined as rtl (right to left)
end - used to align the text to the end/right. That is, align the text to the right, if the direction is defined as ltr (left to right), or to the left, if the direction is defined as rtl (right to left)
justify - similar to left. Stretches the line to cover the whole line area
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS text-align Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid chocolate; margin-bottom: 20px;}
      .a{text-align: left;}
      .b{text-align: right;}
      .c{text-align: start;}
      .d{text-align: start; direction: rtl;}
      .e{text-align: end;}
      .f{text-align: end; direction: rtl;}
      .g{text-align: center;}
      .h{text-align: justify;}
   </style>
</head>
<body>

   <div class="a">
      <h2>text-align: left</h2>
   </div>

   <div class="b">
      <h2>text-align: right</h2>
   </div>

   <div class="c">
      <h2>text-align: start</h2>
   </div>

   <div class="d">
      <h2>text-align: start; direction: rtl</h2>
   </div>

   <div class="e">
      <h2>text-align: end</h2>
   </div>

   <div class="f">
      <h2>text-align: end; direction: rtl</h2>
   </div>

   <div class="g">
      <h2>text-align: center</h2>
   </div>

   <div class="h">
      <h2>text-align: justify</h2>
   </div>
   
</body>
</html>