mozilla

Version 117703 von text-align

  • Adressname der Version: CSS/text-align
  • Titel der Version: text-align
  • ID der Version: 117703
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar no wording changes
Schlagwörter: 

Inhalt der Version

Übersicht

Die text-align Eigenschaft legt fest, wie Inhalte in Block-Elementen horizontal ausgerichtet werden. Die Ausrichtung des Elementes selbst wird nicht bestimmt, nur der Inhalt der sich innerhalb des Elements befindet, wird beeinflusst.

  • Standardwert: start
  • Anwendbar auf: block, table-cell und inline-block Elemente
  • Vererbbar: Ja
  • Prozentwerte: Nein
  • Medium: visuell
  • Werte: left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | inherit

Syntax

 text-align:  left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | inherit 

Werte

left
Linksbündig, der Text wird an der linken Seite des Textbereiches ausgerichtet.
center
Zentriert, der Text wird in der Mitte des Textbereiches ausgerichtet.
right
Rechtsbündig, der Text wird an der rechten Seite des Textbereiches ausgerichtet.
justify
Blocksatz, die Leerzeichen werden so angepasst, dass der Text an der linken und rechten Seite des Textbereiches eine gerade Linie bildet.
start
Standardwert. Verhält sich genau wie left, wenn die Textrichtung ltr ist und wie right, wenn die Textrichtung rtl ist.
end Ab Gecko 1.9.2
Verhält sich genau wie right, wenn die Textrichtung ltr ist und wie left, wenn die Textrichtung rtl ist.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-left
Richtet Inline- sowie Blockelemente linksbündig aus.
-moz-center
Zentriert Inline- sowie Blockelemente.
-moz-right
Richtet Inline- sowie Blockelemente rechtsbündig aus.

Beispiele

Live Beispiel zu den Basiswerten nach CSS 2.1

Beispiel zur Ausrichtung von Blockelementen:

div { text-align: center; border: 1px solid; }

p { background:gold; width:22em; }

inline content...
div { text-align: center; border: 1px solid; }

p { background:gold; width:22em; margin: 1em auto; }

inline content...
div { text-align:-moz-center; text-align:-webkit-center; border: 1px solid; }

p { background:gold; width:22em; }

inline content...

Hinweise

Der Standardkonforme Weg, um ein Blockelement horizontal zu zentrieren, ist eine Angabe von margin: 0 auto; im zu zentrierenden Blockelement selbst.

Browser Kompatibilität

Browser Basiswerte nach CSS 2.1 Ausrichtung von Blockelementen start Wert end Wert
Internet Explorer 3.0 --- --- ---
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) -moz-left | -moz-center | -moz-right 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 --- --- ---
Safari (WebKit) 1.0 (85) 1.0 (85) -khtml-left | -khtml-center | -khtml-right 3.1 (525) 3.1 (525)
1.3 (312) -khtml-left | -khtml-center | -khtml-right |
-webkit-left | -webkit-center | -webkit-right

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align", "pl": "pl/CSS/text-align", "es": "es/CSS/text-align" } ) }}

Quelltext der Version

<h3>Übersicht</h3>
<p>Die <code>text-align</code> Eigenschaft legt fest, wie Inhalte in Block-Elementen horizontal ausgerichtet werden. Die Ausrichtung des Elementes selbst wird nicht bestimmt, nur der Inhalt der sich innerhalb des Elements befindet, wird beeinflusst.</p>
<ul> <li>Standardwert: <code>start</code></li> <li>Anwendbar auf: <code>block</code>, <code>table-cell</code> und <code>inline-block</code> Elemente</li> <li>Vererbbar: Ja</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>Werte: <code>left</code> | <code>center</code> | <code>right</code> | <code>justify</code> | <code>start</code> | <code>end</code> | <code>-moz-left</code> | <code>-moz-center</code> | <code>-moz-right</code> | <a href="/de/CSS/inherit" title="de/CSS/inherit"><code>inherit</code></a></li>
</ul>
<h3>Syntax</h3>
<pre class="eval"> text-align:  left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | inherit 
</pre>
<h3>Werte</h3>
<dl> <dt>left</dt> <dd>Linksbündig, der Text wird an der linken Seite des Textbereiches ausgerichtet.</dd> <dt>center</dt> <dd>Zentriert, der Text wird in der Mitte des Textbereiches ausgerichtet.</dd> <dt>right</dt> <dd>Rechtsbündig, der Text wird an der rechten Seite des Textbereiches ausgerichtet.</dd> <dt>justify</dt> <dd>Blocksatz, die Leerzeichen werden so angepasst, dass der Text an der linken und rechten Seite des Textbereiches eine gerade Linie bildet.</dd> <dt>start</dt> <dd>Standardwert. Verhält sich genau wie <code>left</code>, wenn die Textrichtung <code>ltr</code> ist und wie <code>right</code>, wenn die Textrichtung <code>rtl</code> ist.</dd> <dt>end <span class="lang lang-en"><span style="border: 1px solid rgb(129, 129, 81); background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap; padding: 2px;">Ab Gecko 1.9.2</span> </span></dt> <dd>Verhält sich genau wie <code>right</code>, wenn die Textrichtung <code>ltr</code> ist und wie <code>left</code>, wenn die Textrichtung <code>rtl</code> ist.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h4>Mozilla Erweiterungen</h4>
<dl> <dt>-moz-left</dt> <dd>Richtet Inline- sowie Blockelemente linksbündig aus.</dd> <dt>-moz-center</dt> <dd>Zentriert Inline- sowie Blockelemente.</dd> <dt>-moz-right</dt> <dd>Richtet Inline- sowie Blockelemente rechtsbündig aus.</dd>
</dl>
<h3>Beispiele</h3>
<p><a class="external" href="/samples/cssref/text-align.html" title="samples/cssref/text-align.html">Live Beispiel</a> zu den Basiswerten nach CSS 2.1</p>
<p>Beispiel zur Ausrichtung von Blockelementen:</p>
<div style="text-align:center; border: 1px solid; margin:1em 0">div { <strong>text-align: center</strong>; border: 1px solid; }
<p style="background:gold; width:22em; margin:1em 0">p { background:gold; width:22em; }</p>
inline content...</div>
<div style="text-align:center; border: 1px solid; margin:1em 0">div { <strong>text-align: center</strong>; border: 1px solid; }
<p style="background:gold; width:22em; margin:1em auto">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
inline content...</div>
<div style="text-align:-moz-center; text-align:-webkit-center; border: 1px solid;  margin:1em 0">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border: 1px solid; }
<p style="background:gold; width:22em; margin:1em 0">p { background:gold; width:22em; }</p>
inline content...</div>
<h3>Hinweise</h3>
<p>Der Standardkonforme Weg, um ein Blockelement horizontal zu zentrieren, ist eine Angabe von <code>margin: 0 auto;</code> im zu zentrierenden Blockelement selbst.</p>
<h3>Browser Kompatibilität</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Basiswerte nach CSS 2.1</th> <th colspan="2">Ausrichtung von Blockelementen</th> <th><code>start </code>Wert</th> <th><code>end </code>Wert</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td colspan="2">---</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> <td><code>-moz-left | -moz-center | -moz-right</code></td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td colspan="2">---</td> <td>---</td> <td>---</td> </tr> <tr> <td rowspan="2">Safari (WebKit)</td> <td rowspan="2">1.0 (85)</td> <td>1.0 (85)</td> <td><code>-khtml-left | -khtml-center | -khtml-right</code></td> <td rowspan="2">3.1 (525)</td> <td rowspan="2">3.1 (525)</td> </tr> <tr> <td>1.3 (312)</td> <td><code>-khtml-left | -khtml-center | -khtml-right |<br> -webkit-left | -webkit-center | -webkit-right</code></td> </tr> </tbody>
</table>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" lang="en">CSS 2.1 Text #text-align</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-align" lang="en">CSS 3 Text #text-align</a> (Working Draft)</li>
</ul>
<h3>Siehe auch</h3>
<ul> <li><a href="/de/CSS/direction" title="de/CSS/direction"><code>direction</code></a></li> <li><a href="/de/CSS/vertical-align" title="de/CSS/vertical-align"><code>vertical-align</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align", "pl": "pl/CSS/text-align", "es": "es/CSS/text-align" } ) }}</p>
Zu dieser Version zurücksetzen