`text-align` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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 funktioniert, jedoch in horizontaler Richtung.

Probieren Sie es aus

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section id="default-example">
  <div id="example-element">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

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;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

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 des Zeilenkastens ausgerichtet.
right: Der Inline-Inhalt wird am rechten Rand des Zeilenkastens ausgerichtet.
center: Der Inline-Inhalt wird innerhalb des Zeilenkastens zentriert.
justify: Der Inline-Inhalt wird im Blocksatz ausgerichtet. Dabei wird der Inhalt so verteilt, dass seine linke und rechte Kante mit den linken und rechten Kanten des Zeilenkastens übereinstimmen, außer in der letzten Zeile.
match-parent: Ähnlich wie inherit, jedoch werden die Werte start und end gemäß der direction des Elternteils berechnet und durch den entsprechenden Wert left oder right ersetzt.

Barrierefreiheit

Die ungleichmäßige Verteilung von Abständen zwischen Wörtern, die bei Blocksatz entsteht, kann problematisch für Menschen mit kognitiven Einschränkungen wie Legasthenie sein.

Formale 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

Formale Syntax

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

Beispiele

Anfangsausrichtung

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 zeigt die Verwendung von text-align auf <table>-Elementen:

Der <caption> ist rechtsbündig ausgerichtet.
Die ersten beiden <th>-Elemente erben die linke Ausrichtung von text-align: left, die auf den <thead> gesetzt ist, während das dritte rechtsbündig ausgerichtet ist.
Im <tbody>-Element wird die erste Zeile rechtsbündig ausgerichtet, die zweite zentriert, und die dritte verwendet die Standardausrichtung (links).
Innerhalb jeder Zeile sind einige Zellen (c12, c31) so eingestellt, dass sie die Ausrichtung der Zeile ü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;
}