Textausrichtung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 21 von 76.

In CSS wird die Eigenschaft text-align verwendet, um die horizontale Ausrichtung von Text innerhalb eines HTML-Elements zu steuern.

Gängige Werte für text-align sind:

left: Richtet den Text linksbündig aus. Dies ist die Standardausrichtung für die meisten Texte.

right: Richtet den Text rechtsbündig aus.
center: Zentriert den Text horizontal innerhalb des Elements.

Zum Beispiel:

p {
    text-align: left;
}

h1 {
    text-align: center;
}

.right-align {
    text-align: right;
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>). Ihre Aufgabe ist es, die Eigenschaft text-align zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie text-align auf center.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie text-align auf right.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie text-align auf left.

Spickzettel

Die Eigenschaft text-align steuert die horizontale Textausrichtung innerhalb eines Elements.

Häufige Werte:

left: Richtet den Text linksbündig aus (Standard)
right: Richtet den Text rechtsbündig aus
center: Zentriert den Text horizontal

p {
    text-align: left;
}

h1 {
    text-align: center;
}

.right-align {
    text-align: right;
}

Probier es selbst

<html>
<head>
    <title>Text Alignment</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading. </h1>
    <p>This is a paragraph.</p>
    <div>This is a division. </div>
</body>
</html>