Textausrichtung - CSS-Tricks

Anonim

Die text-alignEigenschaft in CSS wird zum Ausrichten des inneren Inhalts eines Blockelements verwendet.

p ( text-align: center; )

Dies sind die traditionellen Werte für die Textausrichtung:

  • left- Der Standardwert. Der Inhalt wird auf der linken Seite ausgerichtet.
  • right - Der Inhalt wird auf der rechten Seite ausgerichtet.
  • center- Inhaltszentren zwischen dem linken und rechten Rand. Der Leerraum auf der linken und rechten Seite jeder Zeile sollte gleich sein.
  • justify - Der Inhalt wird so ausgeblendet, dass so viele Blöcke wie möglich in eine Zeile passen und das erste Wort in dieser Zeile am linken Rand und das letzte Wort am rechten Rand steht.
  • inherit - Der Wert ist der Wert des übergeordneten Elements.

"Inhalt" wird hier als Begriff anstelle von "Text" verwendet, da die Textausrichtung zwar den Text beeinflusst, jedoch alle Inline- oder Inline-Block-Elemente in diesem Container.

Es gibt auch zwei neue Werte in CSS3: Start und Ende. Diese Werte erleichtern die Unterstützung mehrerer Sprachen. Beispielsweise ist Englisch eine Sprache von links nach rechts (ltr) und Arabisch eine Sprache von rechts nach links (rtl). Die Verwendung von "rechts" und "links" für Werte ist zu starr und passt sich nicht an, wenn sich die Richtung ändert. Diese neuen Werte passen sich an:

  • start - Wie "links" in ltr, wie "rechts" in rtl.
  • end - Wie "rechts" in ltr, wie "links" in rtl.

Es gibt auch match-parent, ähnlich wie inherit, nur, dass der neue Wert gegen die Richtung des aktuellen Elements berechnet wird, anstatt dies nicht zu tun.

Es gibt einige Dinge in der Spezifikation, die noch keine Browserunterstützung haben. Einer ist der Wert "Start Ende", der die erste Zeile wie "Start" und alle nachfolgenden Zeilen wie "Ende" ausrichtet. Eine andere Möglichkeit besteht darin, dem Wert eine Zeichenfolge zu geben, wie z. B. text-align: "." start;Der Text wird beim ersten Auftreten dieser Zeichenfolge angezeigt, um eine Zahlenspalte entlang eines Dezimalpunkts auszurichten.

Beispiele

Dieser Text ist linksbündig.

Dieser Text ist rechtsbündig.

Ich bin zentriert!

Ich bin gerechtfertigt. Ich fülle den Raum genau aus (außer in der letzten Zeile), auch wenn ich mich manchmal etwas dehnen muss.

Ich erbe die Ausrichtung meiner Eltern. In diesem Fall bedeutet das links.

Browser-Unterstützung

Für links, rechts, zentrieren, begründen:

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein Irgendein Irgendein 3.5+ 3+ Irgendein Irgendein

Für die startund endWerte:

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein 3.1+ 3,6+ Keiner Keiner Irgendein Irgendein