Jeder Text kann auf einer Webseite linksbündig, zentriert oder rechtsbündig ausgerichtet werden. Bilder können auf einer Webseite genauso ausgerichtet werden wie Text. Unten finden Sie Beispiele für die Links-, Tabulator-, Zentrierungs- und Rechtsbündigkeit von Text und Bildern.
Wenn eine Ihrer Textausrichtungen nicht funktioniert, stellen Sie sicher, dass andere auf das Element angewendete CSS-Stile oder ein enthaltendes Element nicht mit der Ausrichtung in Konflikt stehen, die Sie festlegen möchten.
Bei diesen Beispielen und den meisten Ausrichtungen wird der Text in dem Element ausgerichtet, das den Text enthält. Text kann in einem HTML-Div zentriert und auf dem Rest der Webseite linksbündig ausgerichtet werden. Auch alles, was im Tag enthalten ist, das die CSS-Begründung enthält (z. B. ein Bild), wird ebenfalls ausgerichtet.
Beispiele für Ausrichtung
Linksbündig
Tabulator ausgerichtet
Zentriert
Rechtsbündig
Linksbündiges Beispiel
Standardmäßig richten Englisch und andere Sprachen den Text linksbündig aus. Wenn Sie jedoch die Ausrichtung eines Elements ändern müssen, kann der folgende Code dem Element oder in CSS hinzugefügt werden.
HTML Quelltext
<p style="text-align: left;">Left-aligned</p>
<p style="text-align: left;"><img src="example.jpg"></p>
Beachten Sie die folgenden zusätzlichen Tipps zum Anpassen der Ausrichtung, des Abstands und des Rands eines Elements.
Tab-ausgerichtetes Beispiel
Obwohl es keine „Tabulator“-Textausrichtung gibt, ergibt das Hinzufügen eines linken Rands das Aussehen einer Tabulatorausrichtung, wie unten gezeigt.
HTML Quelltext
<p style="margin-left:2.5em;">Tab aligned</p>
<p style="margin-left:2.5em;"><img src="example.jpg"></p>
Beachten Sie die folgenden zusätzlichen Tipps zum Anpassen der Ausrichtung, des Abstands und des Rands eines Elements.
Beispiel mit zentrierter Ausrichtung
Mit dem Attribut text-align können Sie jeden Text oder jedes Bild in einem Element zentrieren, wie im Beispiel unten gezeigt.
HTML Quelltext
<p style="text-align: center;">Center-aligned</p>
<p style="text-align: center;"><img src="example.jpg"></p>
Beachten Sie die folgenden zusätzlichen Tipps zum Anpassen der Ausrichtung, des Abstands und des Rands eines Elements.
Rechtsbündiges Beispiel
Mit dem Attribut text-align können Sie jeden Text oder jedes Bild in einem Element zentrieren, wie im Beispiel unten gezeigt.
HTML Quelltext
<p style="text-align: right;">Right-aligned</p>
<p style="text-align: right;"><img src="example.jpg"></p>
Alternativ können Sie CSS verwenden, um ein Bild auf einer Webseite rechtsbündig auszurichten. Weitere Informationen finden Sie unter: Erstellen rechtsbündiger Bilder auf einer Webseite.
Beachten Sie die folgenden zusätzlichen Tipps zum Anpassen der Ausrichtung, des Abstands und des Rands eines Elements.
Zusätzliche Ausrichtungstipps
Nachfolgend finden Sie zusätzliche Ausrichtungstipps, die auf alle oben genannten Stilregeln oder andere CSS-Klassen angewendet werden können.
- Ein zusätzlicher Rand kann zu jedem der oben genannten Stile hinzugefügt werden, wenn Sie eine zusätzliche Einrückung benötigen oder mehr Polsterung wünschen. Beispielsweise könnten Sie auf das rechtsbündige Beispiel ein margin-right anwenden, um den Text weiter in das Element hinein zu verschieben.
- Wenn Sie eine reaktionsschnellere Seite wünschen, stellen Sie sicher, dass Sie alle Links- oder Rechtsausrichtungen anpassen oder entfernen, wenn sie auf einem kleineren Bildschirm angezeigt werden.
