path: root/files/de/web/css/text-align/index.html

---
title: text-align
slug: Web/CSS/text-align
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Text
  - Referenz
translation_of: Web/CSS/text-align
---
<div>{{CSSRef}}</div>

<div>
<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>text-align</code></strong> egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie {{cssxref("vertical-align")}} funktioniert, jedoch in horizontaler Richtung.</p>

<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>

<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

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

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;</pre>

<p>Die Eigenschaft <code>text-align</code> wird auf eine der folgenden Arten angegeben:</p>

<ul>
 <li>Mit den Schlüsselwortwerten <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#start">start</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#end">end</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#left">left</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#center">center</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify">justify</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify-all">justify-all</a></code>, or <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#match-parent">match-parent</a></code>.</li>
 <li>Nur mit einem <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string">&lt;string&gt;</a></code> Wert, wobei in diesem Fall der andere Wert standardmäßig auf <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code> gesetzt wird.</li>
 <li> Die Verwendung sowohl eines Schlüsselwortwerts als auch eines <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string">&lt;string&gt;</a></code> Wertes.</li>
</ul>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>start</code> {{experimental_inline}}</dt>
 <dd>Dasselbe wie <code>left</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>right</code>, falls <code>direction</code> <code>rtl</code> ist.</dd>
 <dt><code>end</code> {{experimental_inline}}</dt>
 <dd>Dasselbe wie <code>right</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>left</code>, falls <code>direction</code> <code>rtl</code> ist.</dd>
 <dt><code>left</code></dt>
 <dd>Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.</dd>
 <dt><code>right</code></dt>
 <dd>Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.</dd>
 <dt><code>center</code></dt>
 <dd>Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.</dd>
 <dt><code>justify</code></dt>
 <dd>Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.</dd>
 <dt><code>justify-all</code> {{experimental_inline}}</dt>
 <dd>Dasselbe wie <code>justify</code>, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.</dd>
 <dt><code>match-parent</code> {{experimental_inline}}</dt>
 <dd>Ähnlich zu <code>inherit</code> mit dem Unterschied, dass die Werte <code>start</code> und <code>end</code> in Bezug auf die {{cssxref("direction")}} des Elternelements berechnet werden und durch den passenden <code>left</code> oder <code>right</code> Wert ersetzt werden.</dd>
 <dt id="string">{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
 <dd>Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.</dd>
</dl>

<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2>

<p>Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Linksbündig">Linksbündig</h3>

<h4 id="HTML">HTML</h4>

<div id="Left_alignment">
<pre class="brush: html notranslate">&lt;p class="example"&gt;
  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.
&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight:[2] notranslate">.example {
  text-align: left;
  border: solid;
}</pre>
</div>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p>

<h3 id="Zentriert">Zentriert</h3>

<h4 id="HTML_2">HTML</h4>

<div id="Centered_text">
<pre class="brush: html notranslate">&lt;p class="example"&gt;
  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.
&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css; highlight:[2] notranslate">.example {
  text-align: center;
  border: solid;
}</pre>
</div>

<h4 id="Ergebnis_2">Ergebnis</h4>

<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p>

<h3 id="Blocksatz">Blocksatz</h3>

<h4 id="HTML_3">HTML</h4>

<div id="Justify">
<pre class="brush: html notranslate">&lt;p class="example"&gt;
  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.
&lt;/p&gt;</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css; highlight:[2] notranslate">.example {
  text-align: justify;
  border: solid;
}</pre>

</div>

<h4 id="Ergebnis_3">Ergebnis</h4>

<p>{{EmbedLiveSample("Justify","100%","100%")}}</p>

<h3 id="Hinweis">Hinweis</h3>

<p>Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten {{cssxref("margin")}} auf <code>auto</code>, z.B..:</p>

<pre class="brush: css notranslate">.something {
  margin: auto;
}
</pre>

<pre class="brush: css notranslate">.something {
  margin: 0 auto;
}
</pre>

<pre class="brush: css notranslate">.something {
  margin-left: auto;
  margin-right: auto;
}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Keine Änderungen</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
   <td>{{Spec2('CSS4 Text')}}</td>
   <td>Fügt den Wert <code>&lt;string&gt;</code> hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Fügt die <code>start</code>, <code>end</code> und <code>match-parent</code> Werte hinzu. Ändert den unbenannten Initialwert zu <code>start</code> (der er war).</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine Änderungen</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>

<p>{{Compat("css.properties.text-align")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{cssxref("margin", "margin:auto")}}, {{cssxref("margin-left", "margin-left:auto")}}, {{cssxref("vertical-align")}}</li>
</ul>