Die Anleitung zu CSS text-align

CSS text-align

1. CSS text-align

Das Property CSS text-align wird für ein Block-Element oder eine Zelle der Tabelle benutzt um seine Inhalt horizontal auszurichten.

/* 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;

Die Wert	Die Bezeichnung
left	die Inhalt des Element nach links ausrichten.
right	die Inhalt des Element nach rechts ausrichten.
center	die Inhalt des Elements nach mittels ausrichten (center).
justify	Den Abstand zwischen die Schriften oder die Inline-Inhalt (inline content) auszurichten versuchen, damit jede Linie die so gleiche Länge wie der Breite des aktuellen Elements hat, außer der letzten Linie.

Die Standardwert von CSS text-align hängt vom Element ab. Wenn die Richtung des Element "Left-to-Right" ist, wird die Standardwert von CSS text-alignleft sein, umgekehrt ist die Richtung des Element "Right-to-Left" , wird die Standardwert von CSS text-alignright sein.
Die Anleitung zu Attribut 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>

Wenn CSS text-align für ein Element angewendet wird, funktioniert es mit allen Inline-Inhalt dieses Element, z.B die Text-Inhalt, die Sub-Elemente wie <span>,.. Aber es funktioniert mit den aktuellen Sub-Block-Element des aktuellen Elements.

Sehen Sie das folgende Beispiel

Das Element DIV1 wird CSS text-align:center eingestellt.
Das Element DIV2 ist das Kind von DIV1, aber DIV2 wird von CSS text-align:center nicht ausgewirkt.

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>

Z.B: Die Verwendung von 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>

Die Anleitung zu CSS text-align

1. CSS text-align

Anleitungen CSS

Anleitungen CSS

Neueste Artikel