Horizontale Ausrichtung: `text-align`

Diese Eigenschaft gibt es seit Version: CSS 1

Mittels text-align kann man die Ausrichtung des Textes in horizontaler Richtung innerhalb von Blockelementen bestimmen. Die Standardeinstellung ist dabei die linksbündige Ausrichtung »left«, was im Web auch am besten lesbar ist. Möglich ist natürlich auch rechtsbündige oder zentrierte Anordnung sowie Blocksatz.

Seit CSS 2 kann in Tabellenspalten außerdem eine Ausrichtung an einem »String« erfolgen. In CSS 2.1 wird diese Möglichkeit aber voraussichtlich wieder entfernt werden, zumal sie bisher von keinem Browser unterstützt wird.

Code-Beispiel für `text-align`:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd"> 
   <html> 
      <head> 
          <title>Beispiel für die horizontale Ausrichtung</title>

  <style type="text/css"> 
          .linksbuendig {text-align: left;}
          .rechtsbuendig {text-align: right;}
          .zentriert {text-align: center;}
          .blocksatz {text-align: justify;}
          td {text-align: ","}
  </style> 
 </head> 
 <body> 
      <p class="linksbuendig">Dieser Absatz ist linksbündig ausgerichtet.</p>
      <p class="rechtsbuendig">Dieser Absatz ist rechtsbündig ausgerichtet.</p>

      <p class="zentriert"> Dieser Absatz ist zentriert.</p>
      <p class="blocksatz">Dieser Absatz ist im Blocksatz gesetzt. Damit man das auch sieht, ist der Text hier etwas länger.</p>

<table>
  <tr>

        <td>21,24 EUR</td>
  </tr> 
  <tr>
       <td>434,56 EUR</td>
  </tr>

  <tr>
       <td>3256,65 EUR</td>
  </tr>
  <tr>
       <td>3,89 EUR</td>

  </tr>
</table>  
   
 </body> 
</html>

Beispiel ansehen

Initialwert:	Abhängig vom Browser und von direction
Vererbbar:	Ja
Anwendbar auf:	Block-Elemente
Medium:	Visual
Werte:	left Linksbündig right Rechtsbündig center Zentriert justify Blocksatz. Alle Zeilen haben die gleiche Länge. Inherit »string« In Tabellenzellen können Zeichen innerhalb von Anführungszeichen (»string«) definiert werden. Dieses Zeichen steht dann immer genau untereinander - Zeichen davor und danach richten sich an ihm aus.

Anmerkung: der IE hat einen Bug, so dass nicht nur Text innerhalb von Blockelementen zentriert wird, sondern gleich das gesamte Blockelement selbst, wenn »text-align: center« verwendet wird.

Wert