Table Of Content

CSS text-align Tutorial

View more Tutorials:

1- CSS text-align

The  CSS text-align property is used for a block element or a table cell to align its contents horizontally. 
/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
Value Description
left Align the content of an element to the left.
right Align the content of an element to the right
center Align the content of an element to the center.
justify Try to adjust spacing between words (or inline contents) so that each line has the length equal to the width of the current element, except for the last line.
The default value of  CSS text-align depends on the direction of the element. If the element's direction is "Left-to-Right", the default value of CSS text-align is  left, whereas if the direction of the element is "Right-to-Left", the default value of  CSS text-align is  right.
text-align-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-align</title>
      <meta charset="UTF-8"/>
      <style>
          #my-div {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: left;
          }
          #my-div span {
            background-color: yellow;
          }
      </style>
      <script>
          function changeTextAlign(event)  {
             var textAlign = event.target.value;

             var div = document.getElementById("my-div");
             div.style.textAlign = textAlign;
          }
      </script>
   </head>
   <body>
       <h1>CSS text-align</h1>

       <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
       <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
       <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
       <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>

       <hr/>

       <div id = "my-div">
           Apollo 11 was the spaceflight that landed the first humans,
           Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
           on the Moon on July 20, 1969, at 20:18 UTC.
           <span>Armstrong</span> became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.

           <span>Armstrong</span> spent about three and a half two
           and a half hours outside the spacecraft,
           <span>Aldrin</span> slightly less; and together they
           collected 47.5 pounds (21.5 kg) of lunar material
           for return to Earth. A third member of the mission,...
       </div>

   </body>
</html>
When  CSS text-align applies to an element, it works with all the inline contents of this element, for example, text content, child elements such as <span>, etc. But it doesn't has an effect on the child block elements of the current element. 
See the following example:
  • The DIV1 element is established CSS text-align:center.
  • The DIV2 element is the child of DIV1, but DIV2 is not affected by CSS text-align:center.
text-align-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-align</title>
      <meta charset="UTF-8"/>
      <style>
          #div1 {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: left;
          }
          #div1 span {
            background-color: yellow;
          }
          #div2 {
            background-color: yellow;
            width: 180px;
            height: 50px;
            padding: 5px;
            margin-top: 10px;
          }
      </style>

      <script>
          function changeTextAlign(event)  {
             var textAlign = event.target.value;

             var div1 = document.getElementById("div1");
             div1.style.textAlign = textAlign;
          }
      </script>
   </head>
   <body>
       <h1>CSS text-align</h1>

       <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
       <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
       <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
       <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>
       <hr/>


       <p style="font-style:italic;color:red;">
         CSS text-align cannot align child block elements.
       </p>

       <div id = "div1">
             Apollo 11 was the spaceflight that landed the first humans,
             Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
             on the Moon on July 20, 1969, at 20:18 UTC.
             <span>Armstrong</span> became the first to step onto the lunar
             surface 6 hours later on July 21 at 02:56 UTC.

             <span>Armstrong</span> spent about three and a half two
             and a half hours outside the spacecraft,
             <span>Aldrin</span> slightly less; and together they
             collected 47.5 pounds (21.5 kg) of lunar material
             for return to Earth. A third member of the mission,...

            <div id = "div2">
                I am div2, A block element.
            </div>
       </div>

   </body>
</html>
Example: Use  CSS margin:auto.
margin-auto-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS margin:auto</title>
      <meta charset="UTF-8"/>
      <style>
          .div1 {
            background-color: #eee;
            min-height: 135px;
            padding: 5px;
            text-align: center;
          }
          .div2 {
            background-color: yellow;
            width: 180px;
            height: 50px;
            padding: 5px;
            margin-top: 10px;
          }
      </style>
   </head>
   <body>
       <h1>CSS margin:auto</h1>
       <hr/>

       <div class = "div1">
            I am div1 {text-align: center;}

            <div class="div2" style="margin-left:auto;margin-right:auto;">
                margin-left:auto;<br/>
                margin-right:auto;
            </div>

            <div class="div2" style="margin-right:auto;">
                margin-right:auto;
            </div>

            <div class="div2" style="margin-left:auto;">
                margin-left:auto;
            </div>
       </div>

   </body>
</html>

View more Tutorials: