initial commit

1 files changed, 238 insertions, 0 deletions

diff --git a/files/de/web/css/text-align/index.html b/files/de/web/css/text-align/index.html
new file mode 100644
index 0000000000..5af079ca81
--- /dev/null
+++ b/files/de/web/css/text-align/index.html
@@ -0,0 +1,238 @@
+---
+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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>