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>
Output

text-align: left

text-align: right

text-align: start

text-align: start; direction: rtl

text-align: end

text-align: end; direction: rtl

text-align: center

text-align: justify

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋