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

CSS text-align

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.
Руководство атрибутам HTML dir

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>

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

1. CSS text-align

Pуководства CSS

Pуководства CSS

Новейшие статьи