text-align

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die text-align CSS Eigenschaft legt die horizontale Ausrichtung des Inline-Inhalts innerhalb eines Blockelements oder einer Tabellenzelle fest. Das bedeutet, dass sie ähnlich wie vertical-align arbeitet, jedoch in horizontaler Richtung.

Probieren Sie es aus

Syntax

css

/* Keyword values */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

Die text-align Eigenschaft wird als ein einzelnes Schlüsselwort aus der folgenden Liste angegeben.

Werte

start: Entspricht left, wenn die Richtung von links nach rechts ist, und right, wenn die Richtung von rechts nach links ist.
end: Entspricht right, wenn die Richtung von links nach rechts ist, und left, wenn die Richtung von rechts nach links ist.
left: Der Inline-Inhalt wird am linken Rand der Linienbox ausgerichtet.
right: Der Inline-Inhalt wird am rechten Rand der Linienbox ausgerichtet.
center: Der Inline-Inhalt wird innerhalb der Linienbox zentriert.
justify: Der Inline-Inhalt wird ausgerichtet. Der Inhalt wird so verteilt, dass seine linken und rechten Ränder mit den linken und rechten Rändern der Linienbox übereinstimmen, außer bei der letzten Zeile.
match-parent: Ähnlich wie inherit, jedoch werden die Werte start und end gemäß der direction des Elternelements berechnet und durch den passenden Wert left oder right ersetzt.

Barrierefreiheit

Der ungleichmäßige Abstand zwischen Wörtern, der durch ausgerichteten Text entsteht, kann problematisch für Menschen mit kognitiven Beeinträchtigungen wie Legasthenie sein.

Formelle Definition

Anfangswert	`start` oder ein namenloser Wert, der sich wie `left` verhält, falls `direction` den Wert `ltr` hat, `right`, falls `direction` den Wert `rtl` hat, falls `start` nicht vom Browser unterstützt wird.
Anwendbar auf	Blockcontainer
Vererbt	Ja
Berechneter Wert	wie angegeben, außer für den `match-parent` Wert, welcher in Bezug auf den `direction` Wert des Elternelements berechnet wird und einen berechneten Wert von `left` oder `right` ergibt
Animationstyp	diskret

Formelle Syntax

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

Beispiele

Startausrichtung

HTML

html

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.example {
  text-align: start;
  border: solid;
}

Ergebnis

Zentrierter Text

HTML

html

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.example {
  text-align: center;
  border: solid;
}

Ergebnis

Beispiel mit "justify"

HTML

html

<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.example {
  text-align: justify;
  border: solid;
}

Ergebnis

Tabellenausrichtung

Dieses Beispiel demonstriert die Verwendung von text-align auf <table> Elementen:

Die <caption> ist rechtsbündig ausgerichtet.
Die ersten beiden <th>-Elemente erben die linke Ausrichtung von text-align: left, das auf <thead> gesetzt ist, während das dritte rechtsbündig ausgerichtet ist.
Innerhalb des <tbody>-Elements ist die erste Reihe rechtsbündig, die zweite zentriert und die dritte verwendet die Standardausrichtung (links).
Innerhalb jeder Reihe sind einige Zellen (c12, c31) so gesetzt, dass sie die Ausrichtung der Reihe überschreiben.

HTML

html

<table>
  <caption>
    Example table
  </caption>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th class="right">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="right">
      <td>11</td>
      <td class="center">12</td>
      <td>13</td>
    </tr>
    <tr class="center">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr id="r3">
      <td class="right">31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </tbody>
</table>

CSS

css

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}

thead {
  text-align: left;
}

td,
th {
  border: solid 1px black;
}

.center {
  text-align: center;
}

.right,
caption {
  text-align: right;
}

Ergebnis

Spezifikationen

Specification
CSS Logical Properties and Values Level 1 # text-align
CSS Text Module Level 3 # text-align-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

margin: auto, margin-left: auto, vertical-align