CSS/Eigenschaften/Textausrichtung/text-align

Aus SELFHTML-Wiki
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
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text-align</title>
    <style>
      .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { text-align: center; }
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end     { text-align: end; }
    </style>
  </head>
  <body>
 
    <!-- 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="/mediawiki/skins/common/images/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>
 
  </body>
</html>
  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.

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
  • Leer
  • Safari
  • start: am Reihenbeginn relativ zur Schreibrichtung ausgerichtet, also links in einem ltr Kontext. (Standardwert)
  • end: am Reihenende relativ zur Schreibrichtung ausgerichtet, also rechts in einem ltr Kontext
  • match-parent: wie inherit unter Berücksichtigung von start bzw. end

Der Defaultwert ist start. Das Blocksatz-Verhalten hängt von anderen Eigenschaften wie white-space, letter-spacing und word-spacing ab.

Beachten Sie: 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.

[Bearbeiten] Blocksatz formatieren

Überschriften, Textabsätze und Tabellenzellen können Sie mit der CSS-Eigenschaft text-align ausrichten, der Sie den Wert justify für Blocksatz zuweisen können.

Wenn Sie in der letzten Zeile z.B. den Autor rechts platzieren wollen, können Sie text-align-last verwenden.

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

Beachten Sie: Das HTML-Attribut align ist als obsolet gekennzeichnet und sollte nicht mehr verwendet werden.
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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML