DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft text-align wird verwendet, um den inneren Inhalt eines Blockelements auszurichten.
p {
text-align: center;
}Dies sind die traditionellen Werte für text-align
left– Der Standardwert. Der Inhalt wird linksbündig ausgerichtet.right– Der Inhalt wird rechtsbündig ausgerichtet.center– Der Inhalt wird zwischen den linken und rechten Rändern zentriert. Weißer Platz auf der linken und rechten Seite jeder Zeile sollte gleich sein.justify– Der Inhalt wird so verteilt, dass so viele Blöcke wie möglich auf eine Zeile passen und das erste Wort dieser Zeile am linken Rand und das letzte Wort am rechten Rand ausgerichtet ist.inherit– Der Wert ist derselbe wie der des übergeordneten Elements.
Hier wird „Inhalt“ anstelle von „Text“ verwendet, da text-align zwar Text beeinflusst, aber alle Inline- oder Inline-Block-Elemente in diesem Container beeinflusst.
Es gibt auch zwei neue Werte in CSS3: start und end. Diese Werte erleichtern die Unterstützung mehrerer Sprachen. Zum Beispiel ist Englisch eine Links-nach-Rechts (ltr) Sprache und Arabisch eine Rechts-nach-Links (rtl) Sprache. Die Verwendung von „right“ und „left“ als Werte ist zu starr und passt sich nicht an, wenn sich die direction ändert. Diese neuen Werte passen sich an.
start– Dasselbe wie „left“ in ltr, dasselbe wie „right“ in rtl.end– Dasselbe wie „right“ in ltr, dasselbe wie „left“ in rtl.
Es gibt auch match-parent, was inherit ähnelt, nur dass der neue Wert gegen die Richtung des aktuellen Elements berechnet wird, anstatt, naja, das nicht zu tun.
Es gibt ein paar Dinge in der Spezifikation, die noch keine Browserunterstützung haben. Eines davon ist der Wert „start end“, der die erste Zeile so ausrichten würde, als wäre sie „start“ und alle nachfolgenden Zeilen, als wäre sie „end“. Ein weiteres ist die Angabe eines Strings als Wert, wie z.B. text-align: "." start; Der Text wird an der ersten Fundstelle dieses <string> ausgerichtet, um z.B. eine Spalte von Zahlen an einem Dezimalpunkt auszurichten.
Beispiele
Dieser Text ist linksbündig.
Dieser Text ist rechtsbündig.
Ich bin zentriert!
Ich bin blocksatz. Ich fülle den Raum genau aus (außer in der letzten Zeile), auch wenn ich mich manchmal strecken muss.
Ich erbe die Ausrichtung meines Elternelements. In diesem Fall bedeutet das links.
Weitere Ressourcen
Verwandte Eigenschaften
Browser-Unterstützung
Für left, right, center, justify
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | 3.5+ | 3+ | Alle | Alle |
Für die Werte start und end
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3.1+ | 3.6+ | Keine | Keine | Alle | Alle |
Wirklich ein toller Beitrag. Sehr informativ, vielen Dank!
p.s.
im Teil start und end, „Arabisch ist eine links-nach-rechts (rtl) Sprache.“
Ich bin hierher gekommen, um danach zu fragen!
Es scheint, dass Opera 19 jetzt text-align: start / end unterstützt.
Welche Display-Eigenschaften unterstützen text-align, zum Beispiel wenn ich h4 stilisiere als
h4{
display:block;
}
Wird es die Eigenschaft text-align:center akzeptieren oder nicht?
h4 ist standardmäßig ein Block-Element. Was passiert, wenn ich es float'e oder seine Position von static ändere? Akzeptiert es dann immer noch text-align center oder nicht?
nein... es wird linksbündig ausgerichtet
aber du kannst width:100% verwenden, dann akzeptiert es text-align:center
text-align:center funktioniert nicht bei einem Div mit position relative und 10px Padding. Irgendwelche Vorschläge?
wirklich?
kannst du mir ein Beispiel (Demo) für deinen Fall geben?
text-align funktioniert für alle außer für Blockelemente, deren Breite vom Benutzer festgelegt wurde. Dafür musst du margin:auto; verwenden.
TypeO
Arabisch ist eine links-nach-rechts (rtl) Sprache
Sollte sein
Arabisch ist eine rechts-nach-links (rtl) Sprache
?
Kannst du mir sagen, wie man Zahlen im Verhältnis zum Dezimalpunkt ausrichtet?
*12.34
**2.45
120.13
450.00
Hallo, oh Guru von CSS…
Ich habe ein kniffliges Problem mit zentriertem Text, bei dem ich hoffe, dass du mir helfen kannst…
Wenn ich einen harten Zeilenumbruch zu einem Text hinzufüge, wird die Zentrierung der Textzeilen so berechnet, dass auch ein Leerzeichen vor dem BR-Tag berücksichtigt wird.
Bei natürlichen Umbruchpunkten (kein BR-Tag) zentriert der Text die Zeilen und ignoriert nachfolgende Leerzeichen…
Es ist keine große Sache, aber für einen pingeligen Designer ist die Textzentrierung offensichtlich daneben.
Gibt es eine Möglichkeit, dies nur mit CSS zu beheben – ohne die offensichtliche Lösung, Leerzeichen vor dem BR-Tag zu entfernen? [Mehrsprachiges CMS mit verschiedenen Benutzern – grundlegende Typografie soll ohne zu viel Aufwand möglich sein]
Beispiel
Wie gesagt – kein großer Unterschied – aber…
Code verloren gegangen…
<style>.center {text-align:center; width:145px; margin:2em 0; font: bold 20px/100% sans-serif; letter-spacing:-0.05em}</style>
<div class="center">der schnelle braune Fuchs springt über den faulen Hund</div>
<div class="center">der schnelle braune <br>Fuchs springt über den faulen Hund</div>
Hallo, kannst du mir die Kurzschreibweise für das Boxmodell sagen?
Wie kann ich Text im Stil von Microsoft Office 2013 „start“ ausrichten?
Für mein Projekt einen Online-Editor,
http://root-editor.blogspot.com/sehr schön….
„…Arabisch ist eine links-nach-rechts (rtl) Sprache“
nein... das ist es nicht! Es ist eine rechts-nach-links Sprache: rtl
Hallo, ich habe ein Problem mit der Zentrierung meiner Kategorien (über den Post-Titeln) auf meinem Blog.
Text-align: center; funktioniert nicht und ich weiß nicht, was ich tun soll.
Hat jemand eine Idee? Danke!
Die URL meines Test-Blogs ist
http://trisssinator.blogspot.se/
Hallo, die Textausrichtung ist zentriert, aber die Wörter sind linksbündig ausgerichtet. Wie gebe ich dafür CSS ein?
Wenn Texte blocksatz formatiert sind, reihen sie sich einfach am linken Rand des Containers auf. Wie kann man sie an beiden Rändern ausrichten (wie bei Zentrierter Blocksatz in MS Word oder Photoshop)?
Großartig, leicht verständliches CSS für jemanden, der neu darin ist wie ich. Danke fürs Posten!
Hallo CSS Tricks Community, ich habe eine Website namens Manabadi und möchte meinen Text in jedem Ende meiner WordPress-Beiträge gleichmäßig und ohne Unregelmäßigkeiten anzeigen. Bitte überprüfen Sie meinen Beitrag und schlagen Sie einige Tricks dafür vor. Hier ist die URL meines Blogs
manabadi.co Danke
Es funktioniert bei mir gut, danke! Blocksatz sieht auf kleineren Bildschirmen immer noch etwas seltsam aus, aber es erfüllt seinen Zweck.
Die Zentrierung funktionierte in IE-11 nicht. Kann mir jemand helfen. Übrigens habe ich es mit den folgenden Stilen versucht.
text-align: -moz-center;
text-align: -webkit-center;
margin: 0 auto;
Ich bekomme meinen Text in Blöcken nicht blocksatz formatiert.
Im zusätzlichen CSS habe ich die Zeile eingefügt
#selector {
text-align:justify;
}
Aber es funktioniert nicht, was mache ich falsch?
Ich habe auch das hier versucht
.align-justified {
text-align: justify!important;
}
Hat auch nicht funktioniert.
Das Schlüsselwort !important muss durch Leerzeichen getrennt sein, versuch es mal so;
#selector{
text-align:justify !important;
}
Wenn Sie das Folgende verwenden, prüfen Sie die Spezifität und den Kaskadeneffekt.
#selector{
text-align:justify;
}