HTML Text ausrichten: rechtsbündig & linksbündig

Ad

Dies ist die Standardeinstellung in HTML. Um Text explizit linksbündig auszurichten, benötigst du keine speziellen Attribute.

So richtest du Text in HTML aus:

Linksbündige Ausrichtung:

Beispiel:

HTML
<p>Dies ist ein linksbündiger Text.</p>

Rechtsbündige Ausrichtung:

Es gibt zwei Möglichkeiten, Text in HTML rechtsbündig auszurichten:

Mit dem Attribut align:

Verwende das Attribut align im entsprechenden Tag (z.B. <p>, <div>) und setze den Wert auf "right".

Beispiel:

HTML
<p align="right">Dies ist ein rechtsbündiger Text.</p>

Mit CSS:

Verwende die CSS-Eigenschaft text-align und setze den Wert auf "right". Dies ist die modernere und flexiblere Methode.

Beispiel:

CSS
p {
  text-align: right;
}

Zentrierte Ausrichtung:

Um Text zu zentrieren, verwende entweder das Attribut align mit dem Wert "center" oder die CSS-Eigenschaft text-align mit dem Wert "center".

Beispiel (align):

HTML
<p align="center">Dies ist ein zentrierter Text.</p>

Beispiel (CSS):

CSS
p {
  text-align: center;
}

Blocksatz:

Beim Blocksatz wird der Text an beiden Rändern ausgerichtet, wodurch gerade Zeilen entstehen. Dies kann mit der CSS-Eigenschaft text-align und dem Wert "justify" erreicht werden.

Beispiel:

CSS
p {
  text-align: justify;
}

Was bedeuted was?

  • Linksbündig: Der Text beginnt am linken Rand des Containers und endet an einer ungeraden rechten Kante.
  • Rechtsbündig: Der Text beginnt an einer ungeraden linken Kante und endet am rechten Rand des Containers.
  • Zentriert: Der Text befindet sich in der horizontalen Mitte des Containers.
  • Blocksatz: Der Text wird an beiden Rändern des Containers ausgerichtet, wodurch gerade Zeilen entstehen.

Tipp: Es ist generell empfehlenswert, CSS anstelle des Attributs align zu verwenden, da CSS flexibler und zukunftssicherer ist.

Zusätzliche Informationen:

  • Die Ausrichtung von Text kann auch auf Zeilenebene mit den CSS-Eigenschaften text-align-left, text-align-center und text-align-right gesteuert werden.
  • Mit CSS-Flexbox und CSS-Grid lassen sich noch komplexere Layouts für die Textausrichtung erstellen.

Ich hoffe, diese Erklärung hilft dir weiter!

    css        html   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?