CSS text-align ist ein CSS-Attribut, das die Struktur und Ausrichtung von Texten innerhalb eines HTML-Elements oder eines CSS-Blocks beeinflusst. Es wird vor allem verwendet, um Text-Elemente innerhalb einer Box oder eines Divs auf links- oder rechtsbündig, mittig oder als Blocksatz auszurichten.
CSS text-align – Was ist das eigentlich?
Mithilfe von CSS text-align lassen sich Text-Elemente durch übergeordnete Eltern-Elemente in spezifischer Art und Weise ausrichten. Insbesondere für Wörterbücher oder Blogs ist CSS text-align ein unerlässliches Tool zur ästhetischeren Aufbereitung und Gestaltung von Texten.
Kurze Anleitung zu CSS text-align
CSS-Textausrichtungen sind nicht nur sehr nützlich, sondern auch notwendig, wenn man eine Seite möglichst ansprechend gestalten möchte. Man kann bestimmte Texte auf der Seite neu ausrichten, um eine bestimmte visuelle Wirkung zu erzielen oder auf ein anderes Element auf der Seite aufmerksam zu machen. Das Attribut lässt sich ganz einfach auch von Anfängern und Menschen ohne CSS Vorkenntnissen umgesetzt werden, wodurch es umso nützlicher ist!
Schritt 1: Eltern-Element definieren
main {
border: 3px red;
margin: 1rem;
padding: 1rem;
}Schritt 2: Text ausrichten – links/rechts
main {
border: 3px red;
margin: 1rem;
padding: 1rem;
text-align: right;
}Die möglichen Werte für text-align sind:
- left
- right
- center
- justify
- inherit
Während der Text mit dem Wert „left“ nach links ausgerichtet wird, wird er mit dem Wert „right“ nach rechts gerichtet.
Schritt 3: Text ausrichten – mittig
main {
border: 3px red;
margin: 1rem;
padding: 1rem;
text-align: center;
}Mit dem Wert „center“ richtet sich der Text mittig aus. Dabei ist es wichtig zu wissen, dass sich lediglich der Text in Relation zum ihm übergeordneten Block ausrichtet. Dahingegen verteilt sich der Text mit „justify“ auf die gesamte Breite des Elements und ähnelt von der Struktur her dem Blocksatz.
Wenn text-align auf „inherit“ eingestellt ist, erbt das untergeordnete Element die Eigenschaften des übergeordneten Eltern-Eements.
main {
border: 3px red;
margin: 1rem;
padding: 1rem;
text-align: center;
}
p {
font-size: 1.5rem;
background-color: blue
margin: 1rem 0;
padding: 1rem;
text-align: inherit;
}In diesem Fall wird der Text zentriert und nicht nach Standardeinstellungen nach links ausgerichtet.
Untergeordnete Elemente, die keinen text-align Wert zugewiesen bekommen haben, erben ebenfalls die Zuweisung des Eltern-Elements, wie es im folgenden Beispiel ersichtlich wird.
main {
border: 3px red;
margin: 1rem;
padding: 1rem;
text-align: center;
}
p {
font-size: 1.5rem;
background-color: blue
margin: 1rem 0;
padding: 1rem;
}P besitzt kein text-align Attribut und erbt deshalb das text-align Attribut des Eltern-Elements. In dem Fall wird der Text also ebenfalls zentriert.
Besonders wichtig zu wissen ist, dass text-align keinen Einfluss auf container oder Blöcke wie divs hat. Es bezieht sich ausschließlich auf Texte. Wenn ein Header in seiner width auf 50% eingestellt ist und als text-align: center zugewiesen bekommt, wird sich der Titel lediglich im halbierten Header zentriert ausrichten. Ist zudem ein margin vordefiniert, wie in unserem obigen Beispiel, wird der Titel nicht auf exakt 50% des Headers zugeschnitten, da der margin – also der Rand – ebenfalls Teil des Headers ist.
CSS text-align zusammengefasst
Die CSS-Eigenschaft „text-align“ ermöglicht es dem Anwender, die Ausrichtung des Inhalts innerhalb eines HTML-Elements festzulegen. Es gibt mehrere Werte, die für diese Eigenschaft verfügbar sind. Dieses Attribut kann verschiedenste Text-Elemente in kreativer und ästhetischer Weise anordnen und ist somit ein sehr nützliches Tool – Für Anfänger und Fortgeschrittene zugleich!
Alles was Du über CSS text-align wissen solltest
Wie richtet man Texte mit CSS text-align aus?
Mit CSS text-align kann man Texte in besonderer Art und Weise ausrichten, indem man die Werte „left„, „center„, „justify“ oder „right“ nutzt.
Wie zentriert man Texte in CSS?
Um Texte in CSS zu zentrieren nutzt man das CSS Style Attribut text-align: center. Es muss dem entsprechenden HTML-Element des zu zentrierenden Textes zugewiesen werden.
Was bedeutet CSS text-align: justify?
CSS text-align: justify bewirkt eine blocksatz-artige Ausrichtung im übergeordneten Element. Der Text verläuft somit in einer geraden Linie von links und rechts am Rande des Containers entlang.