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>

Versuch es selber!

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>

Versuch es selber!

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.