CSS text-align-Eigenschaft
Die text-align-Eigenschaft wird zum Ausrichten des inneren Inhalts eines Blockelements verwendet.
Sie können die margin-Eigenschaft verwenden, um das Element zu zentrieren.
INFO
Die mit text-align angegebene Ausrichtung bezieht sich nicht auf das umgebende Blockelement oder den Viewport.
| Anfangswert | left bei Richtung "ltr", right bei Richtung "rtl" |
|---|---|
| Anwendbar auf | Blockcontainer. |
| Vererbbar | Ja |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.textAlign = "right"; |
Syntax
Syntax der CSS text-align-Eigenschaft
css
text-align: left | right | center | justify | initial | inherit;Beispiel für die text-align-Eigenschaft mit den Werten "right" und "center":
Beispiel für die CSS text-align-Eigenschaft mit den Werten right und center
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: right;
}
p {
text-align: center;
}
</style>
</head>
<body>
<h2>Text-align property example</h2>
<div>Example for the text-align property.</div>
<p>Some paragraph for example.</p>
</body>
</html>Ergebnis
Beispiel für die text-align-Eigenschaft mit den Werten "center", "left" und "justify":
Beispiel für die CSS text-align-Eigenschaft mit den Werten left, center und justify
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
text-align: center;
}
p.date {
text-align: left;
}
p.example {
text-align: justify;
}
</style>
</head>
<body>
<h2>Text-align property example</h2>
<p class="date">March, 2019</p>
<p class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum h as been the industry's standard dummy text ever since the 1500s when an unknown pri nter took a galley of type and scrambled it to make a type specimen book. It has surviv ed not only five centuries, but also the leap into electronic typesetting, remaining essent ially unchanged. It was popularised in the 1960s with the release of Letraset sheets conta ining Lorem Ipsum passages, and more recently with desktop publishing software like Ald us PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| left | Richtet den Text links aus. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| right | Richtet den Text rechts aus. | Ausprobieren » |
| center | Richtet den Text zentriert aus. | Ausprobieren » |
| justify | Erstreckt die Zeilen, sodass jede Zeile die gleiche Breite hat. | Ausprobieren » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche der folgenden sind gültige Eigenschaftswerte für die 'text-align'-Eigenschaft in CSS?