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:

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 »