Inhaltsverzeichnis

Die Anleitung zu CSS text-align

View more Tutorials:

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-align  left sein, umgekehrt ist die Richtung des Element  "Right-to-Left" , wird die Standardwert von C SS text-align right ​​​​​​​sein.
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>

View more Tutorials: