CSS-Eigenschaft text-align

Die Eigenschaft text-align wird verwendet, um den inneren Inhalt eines Blockelements auszurichten.

Um das Element zu zentrieren, kann die Eigenschaft margin verwendet werden.

Die Ausrichtung, die mit der Eigenschaft text-align angegeben wird, bezieht sich nicht auf das Ansichtsfenster oder den enthaltenen Block.
Anfangswert Links, wenn die Richtung auf "ltr", rechts, wenn die Richtung auf "rtl" eingestellt ist
Gilt für Block-Containers
Geerbt Ja
Animierbar Nein
Version CSS1
DOM Syntax object.style.textAlign = "right";

Syntax

text-align: left | right | center | justify | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div{           
      text-align: right;
      }    
      p{   	
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>CSS-Eigenschaft text-align</h2>
    <div>Beispiel für die Eigenschaft text-align</div>
    <p>Ein Absatz zum Beispiel</p>
  </body>
</html>

Ein Beispiel mit den Werten "center", "left" und "justify":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2 {
      text-align: center;
      }
      p.date {
      text-align: left;
      }
      p.example {
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-align</h2>
    <p class="date">März, 2019</p>
    <p class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Werte

Wert Beschreibung
left Richtet den Text nach links aus. Das ist der Standardwert dieser Eigenschaft.
right Richtet den Text nach rechts aus.
center Richtet den Text in der Mitte aus.
justify Erweitert die Zeilen so, dass jede Zeile die gleiche Breite hat.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+

Übe dein Wissen

Welche Werte sind gültig für die CSS-Eigenschaft 'text-align'?
Finden Sie das nützlich?