CSS/Eigenschaften/Textausrichtung/text-align

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Textausrichtung(Weitergeleitet von Absatzkontrolle)
Wechseln zu: Navigation, Suche

Sie können mit der Eigenschaft text-align die Ausrichtung von Text und inline-Elementen wie Bildern (img) oder Iframes (iframe), etc. innerhalb eines Blocklevel-Elements kontrollieren.

  • CSS 1.0
  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Die Eigenschaft text-align kann folgende Werte annehmen:

  • left: für linksbündige Ausrichtung
  • right: für rechtsbündige Ausrichtung
  • center: für zentrierte Ausrichtung
  • justify: Blocksatz
  • inherit: erbt die Ausrichtung vom Elternelement
  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
  • start: (Standardwert) am Reihenbeginn relativ zur Schreibrichtung ausgerichtet, also links in einem ltr Kontext.
  • end: am Reihenende relativ zur Schreibrichtung ausgerichtet, also rechts in einem ltr Kontext
  • match-parent: wie inherit unter Berücksichtigung von start bzw. end
Beispiel ansehen …
      .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { text-align: center; }
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end     { text-align: end; }
    <!-- 1. -->
    <p class="left">Dieser Text wird linksbündig ausgerichtet.</p>

    <!-- 2. -->
    <p class="right">Dieser Text wird rechtsbündig ausgerichtet.</p>

    <!-- 3. -->
    <p class="center">Dieser Text wird zentriert ausgerichtet.</p>
    <p class="center">
      <img src="poweredby_mediawiki_88x31.png" alt="MediaWiki">
    </p>

    <!-- 4. -->
    <section class="center">
      <p class="justify">Dieser Text wird im Blocksatz ausgerichtet. <br>
      Die letzte Zeile wird ausgerichtet im Kontext des Elternelements.</p>
    </section>

    <!-- 5. -->
    <p class="left" dir="rtl">עברית</p>

    <!-- 6. -->
    <p class="start" dir="rtl">עברית</p>

    <!-- 7. -->
    <p class="end" dir="rtl">עברית</p>
  1. Beispiel: der Text wird linksbündig ausgerichtet.
  2. Beispiel: der Text wird rechtsbündig ausgerichtet.
  3. Beispiel: der Text und das Bild werden zentriert ausgerichtet.
  4. Beispiel: der Text wird im Blocksatz ausgerichtet. Der Absatz steht im Kontext eines zentrierten Elternelement, was die Ausrichtung der letzten Zeile mit beeinflussen sollte. Aktuelle Browser orientieren sich bei der letzten Zeile jedoch an der Schreibrichtung.
  5. Beispiel: Die Schreibrichtung rtl übt keine Uminterpretation der Ausrichtung aus. Linksbündig bleibt linksbündig.
  6. Beispiel: Die Ausrichtung folgt am Zeilenstart relativ zur rtl Schreibrichtung und resultiert hier also in einer rechtsbündigen Ausrichtung.
  7. Beispiel: Die Ausrichtung folgt am Zeilenende relativ zur rtl Schreibrichtung und resultiert hier also in einer linksbündigen Ausrichtung.


Beachten Sie: Das HTML-Attribut align ist als obsolet gekennzeichnet und sollte nicht mehr verwendet werden.

Blocksatz formatieren[Bearbeiten]

Überschriften, Textabsätze und Tabellenzellen können Sie mit text-align: justiy im Blocksatz ausrichten. Das Blocksatz-Verhalten hängt von anderen Eigenschaften wie white-space, letter-spacing und word-spacing ab.

In CSS3 gibt es die Möglichkeit mit hyphens eine automatische Worttrennung einzustellen.

Der Standard sagt nicht explizit, wie die letzte Zeile bei Blocksatz zu behandeln ist. Die aktuellen Browser stellen diese der Schreibrichtung folgend dar, als ob eine Eigenschaft text-align-last:start definiert sei. Wenn Sie in der letzten Zeile z.B. den Autor rechts platzieren wollen, können Sie text-align-last verwenden.

Empfehlung: Da die heute verbreiteten Browser keine automatische Silbentrennung im Fließtext anwenden, kann es bei Blocksatz zu größeren Lücken zwischen Wörtern kommen. Vermeiden Sie Blocksatz deshalb vor allem in schmalen Bereichen. Je breiter der Block ist, desto sauberer sieht der Text aus.
Blocksatz sieht zwar aufgrund der gleichmäßigeren Ränder sauberer aus, ist aber aufgrund der unterschiedlich großen Abstände zwischen den Wörtern für viele Nutzer schwieriger zu lesen.

Siehe auch[Bearbeiten]