Руководство CSS text-align

View more Tutorials:

1- CSS text-align

Свойство (property) CSS text-align используется для блочного элемента (block element) или ячейки (cell) таблицы, чтобы выровнять по горизонтали (Horizontal align) его содержания.
/* 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;
Значение Описание
left Выравнивает содержание элемента налево.
right Выравнивает содержание элемента направоi.
center Выравнивает содержание элемента по центру (center).
justify Пытается выровнить расстояние между буквами (Или встроенным контентом (inline content)), так чтобы каждая строка (line) имела длину равную ширине текущего элемента. Кроме последней строки.
Значение по умолчанию у  CSS text-align зависит от направления элемета. Если направление элемента является  "Left-to-Right" то значение по умолчанию у  CSS text-align является  left, наоборот если направление у элемента является  "Right-to-Left" то значение по умолчанию​​​​​​​ у CSS text-align является  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>
Когда  CSS text-align применяется к элементу, он имеет он работает со всеми встроенными контентами (inline content) данного элемента, например текстовое содержание, таке подэлементы как  <span>,.. Но он не работает с блочными подэлементами текущего элемента.
Рассмотрим следующий пример:
  • Элемент DIV1 настроен CSS text-align:center.
  • Элемент DIV2 является подэлементом DIV1, но CSS text-align:center не влияет на DIV2.
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>
Пример использования  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: