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 Tabellenzellenbox fest. Das bedeutet, sie funktioniert ähnlich wie vertical-align, 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;

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.

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 die linken und rechten Ränder an die linken und rechten Ränder der Linienbox angepasst werden, mit Ausnahme der letzten Zeile.

match-parent

Ähnlich wie inherit, aber die Werte start und end werden gemäß der direction des übergeordneten Elements berechnet und durch den entsprechenden left oder right Wert ersetzt.

Barrierefreiheit

Der ungleichmäßige Abstand zwischen Wörtern, der durch ausgerichteten Text entsteht, kann für Personen mit kognitiven Einschränkungen wie Dyslexie problematisch sein.

Formale Definition

Anfangswertstart 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 aufBlockcontainer
VererbtJa
Berechneter Wertwie 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
Animationstypdiskret

Formale Syntax

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

Beispiele

Start Ausrichtung

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

Tabellen Ausrichtung

Dieses Beispiel zeigt 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 den <thead> gesetzt ist, während das dritte rechtsbündig ist.
  • Innerhalb des <tbody> Elements ist die erste Zeile rechtsbündig, die zweite zentriert, und die dritte verwendet die Standard (linke) Ausrichtung.
  • Innerhalb jeder Zeile sind einige Zellen (c12, c31) so gesetzt, 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;
}

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