Die CSS-Eigenschaft text-align ist für die horizontale Ausrichtung von Text sowie Bildern und anderen Elementen verantwortlich. Das Anwesen verfügt über 4 Möglichkeiten Ausrichtung.
CSS-Textausrichtungssyntax
...Textausrichtung: Mitte | rechtfertigen | links | richtig | erben; ...
- Mitte – Ausrichtung auf die Mitte des Bereichs (z. B. beträgt die Breite des Bereichs 500 Pixel, was bedeutet, dass die Ausrichtung entlang einer Linie von 250 Pixeln erfolgt)
- Blocksatz – streckt den Text über die gesamte Breite des Bereichs
- links - linke Ausrichtung
- rechts - rechte Ausrichtung
- erben – den Wert des Vorfahren (Eltern) akzeptieren
Am häufigsten werden diese Eigenschaften in Blöcken verwendet
Notiz:
Es gibt auch eine Vertical-Align-Eigenschaft, die die vertikale Ausrichtung steuert.
So führen Sie eine Textausrichtung in HTML durch
Beispiel Nr. 1.
Text linksbündig ausrichten. Standardmäßig gültig.
Выравнивание текста по левому краю
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
Выравнивание текста по центру
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
Выравнивание текста по правому краю
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
ПримечаниеВместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание по центруВыравнивание текста по ширине всей области
... ...
Разница в тегах
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
HTML теги, определяющие выравнивание текста, отступ
Выровненный по ширине текст используется в типографии
В примере ниже показано, как выровнить текст по ширине страницы:
| align="left" | align="right" |
|---|---|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
|
| align="justify" | align="center" |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.
Выравнивание текста в HTML по центру и по ширине
Выравнивание текста в HTML по центру, текст справа :
Результат:
Атрибуты и значения
- align="left" - определяет выравнивание текста слева (по умолчанию).
- align="center" - выравнивает текст по центру .
- align="right" - выравнивает текст справа .
Выравнивание | HTML отступ текста
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
Результат:
Посмотреть в новом окне.
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
| 3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ | ||
Краткая информация
Версии CSS
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.HTML5 CSS2.1 IE Cr Op Sa Fx
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.
Reis. 1. Richten Sie den Text im Safari-Browser aus
Der Internet Explorer bis einschließlich Version 7.0 interpretiert dieses Beispiel etwas anders als andere Browser und richtet nicht nur Text, sondern auch Blöcke aus (Abb. 2).
Reis. 2. Richten Sie den Text aus Internet-Browser Explorer 7
Objektmodell
document.getElementById("elementID").style.textAlign
Browser
IE bis einschließlich Version 7.0 richtet nicht nur den Inhalt eines Elements auf Blockebene aus, sondern auch das Element selbst.
Eigenschaft text-align-last ( Nicht zu verwechseln mit HTML-Alignment) bestimmt, wie die letzte Zeile eines Blocks oder die Zeile vor einem erzwungenen Umbruch ausgerichtet wird. Das ist wichtig, weil in letzte Linie Ein Absatz enthält normalerweise nicht genug Text, um den gesamten Raum auszufüllen.
In diesem Artikel behandeln wir alle Aspekte der text-align-last-Eigenschaft, einschließlich der von ihr akzeptierten Werte und der Browserunterstützung.
Verwendung und akzeptierte Werte
Die Verwendung der text-align-last-Eigenschaft ist einfach. Hier ist ein Codeausschnitt, um die letzte Textzeile rechts auszurichten:
Intro-Graph ( text-align: justify; // Erforderlich für IE und Edge text-align-last: right; )
Die Eigenschaft kann sieben Werte annehmen. Sie kennen wahrscheinlich die Standard-HTML-Textwerte align:left , right und center . Sie richten den Text in der letzten Zeile rechts, links und in der Mitte des Containers aus.
Das folgende Beispiel veranschaulicht die Unterschiede zwischen diesen drei Werten:
Beispiel ansehen
Der vierte Wert, justify , richtet die letzte Zeile aus, sodass der Text gleichmäßig über die gesamte Breite des Containers verteilt wird. Dies wird erreicht, indem zwischen den Wörtern eine angemessene Anzahl von Leerzeichen eingefügt wird. Abhängig von der Textmenge kann diese Eigenschaft verwendet werden, um den Raum in der letzten Zeile vollständig auszufüllen, ohne dass am Ende zu große Lücken zwischen den Wörtern entstehen.
Der Text im zweiten Absatz wird ebenfalls über die Breite verteilt, da die letzte Zeile jedoch nur ein Wort enthält, wird sie links positioniert.
Beispiel ansehen
Die Ausrichtung der letzten Textzeile nach links eignet sich für Sprachen, die von links nach rechts gelesen werden ( LTR), aber das ist für RTL-Sprachen falsch. In solchen Fällen kann die Verwendung der linken oder rechten Werte zu Problemen führen.
Glücklicherweise können Sie den Startwert verwenden, um Text an der Kante auszurichten, an der das Schreiben und Lesen beginnt. Das bedeutet, dass Sie den Text linksbündig für LTR-Sprachen und rechtsbündig für RTL-Sprachen ausrichten, indem Sie die text-align-last-Eigenschaft auf start setzen.
Sie können den Endwert auch verwenden, um Text an der gegenüberliegenden Kante auszurichten, an der Sie mit dem Schreiben und Lesen beginnen. Dies entspricht dem Wert right für LTR-Sprachen und left für RTL-Sprachen.
Beispiel ansehen
Der Standardwert für diese Eigenschaft ist auto . Bei Verwendung wird der Text in der letzten Zeile entsprechend dem Wert ausgerichtet HTML-Eigenschaften Text wird ausgerichtet, es sei denn, er ist auf „Blocksatz“ eingestellt. Andernfalls wird der Text nur dann über die Breite des Containers verteilt, wenn die Eigenschaft „text-justify“ auf „distribute“ festgelegt ist. Andernfalls wird der Text an der Kante ausgerichtet, an der das Schreiben und Lesen beginnt.
Wichtige Notizen
Damit text-align-last funktioniert, muss die Eigenschaft text-align auf justify gesetzt sein. Diese Regel ist jedoch nur im IE und Edge implementiert. In Firefox und Chrome funktioniert die Eigenschaft, ohne dass text-align auf justify gesetzt wird. Im folgenden Beispiel sollte der Text in Edge und IE rechtsbündig sein. In anderen Browsern werden die letzten Zeilen von Absätzen entsprechend dem Wert der Eigenschaft text-align-last ausgerichtet und die restlichen Zeilen werden rechtsbündig ausgerichtet.
Demo ansehen
Wenn wir text-align nicht auf align justify HTML setzen, sieht das Ergebnis nicht so gut aus. Daher werden Sie höchstwahrscheinlich die Textverteilung auf „Breite“ einstellen.
Die Eigenschaft funktioniert auch dann, wenn der Absatz über einen erzwungenen Zeilenumbruch verfügt, der mithilfe des Tags angegeben wird
oder etwas ähnliches. Beachten Sie, dass sich diese Eigenschaft auf alle letzten Textzeilen innerhalb des angegebenen Elements auswirkt, nicht nur auf die äußerste. Wenn der Text in einem Artikel- oder Div-Element beispielsweise drei Absätze enthält, wird die letzte Zeile in jedem entsprechend der text-align-last-Eigenschaft ausgerichtet, die für das gesamte übergeordnete Element festgelegt ist.
Wenn Sie nur die allerletzte Zeile des Inhalts ausrichten müssen, können Sie die Selektoren :last-child oder :last-of-type verwenden. Nehmen Sie den Code aus der Demo unten als Beispiel:
Artikel ( text-align: justify; ) Artikel p:last-of-type ( text-align-last: right; )
Dadurch wird die letzte Zeile des letzten Absatzes unseres Artikels rechtsbündig ausgerichtet. Die verbleibenden Zeilen werden basierend auf dem Wert der Eigenschaft „HTML-Textausrichtung“ ausgerichtet.
Demo ansehen
Sie können auch andere Selektoren verwenden: :even und :odd, um die Ausrichtung zu ändern.
Manchmal besteht ein Absatz nur aus einer Zeile. Wenn Sie in diesem Fall Werte sowohl für die Eigenschaft text-align als auch für die Eigenschaft text-align-last angegeben haben, hat die letztere Eigenschaft Vorrang.
Betrachten Sie den folgenden Codeausschnitt:
p ( text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )
Wenn der zweite Absatz nur eine Zeile hat, wird der Text linksbündig ausgerichtet, da text-align-last Vorrang hat. Die folgende Demo zeigt diesen CSS-Code sowie einige andere in Aktion. HTML-Beispiele ausrichten.
Demo ansehen
Browserunterstützung
Die Unterstützung dieser Eigenschaft kann mit der Option „ aktiviert werden. Aktivieren Sie experimentelle Webplattformfunktionen„V Google Chrome und Opera, beginnend mit den Versionen 35 bzw. 22. Es wird vollständig in Chrome 47+ und Opera 34+ unterstützt.
Um diese Eigenschaft in Firefox zu verwenden, müssen Sie ihr -moz- voranstellen. Die Start- und Endwerte werden vom IE nicht unterstützt. Gleichzeitig unterstützt Edge diese Eigenschaft vollständig. Der einzige beliebte Browser, der text-align-last nicht vollständig unterstützt, ist Safari.
Legt die Ausrichtung der letzten Zeile eines Textblocks fest.
Brief Information
Bezeichnungen
| Beschreibung | Beispiel | |
|---|---|---|
| <тип> | Gibt den Typ des Werts an. | <размер> |
| A && B | Die Werte müssen in der angegebenen Reihenfolge ausgegeben werden. | <размер> && <цвет> |
| A | B | Zeigt an, dass Sie nur einen der vorgeschlagenen Werte (A oder B) auswählen müssen. | normal | Small-Caps |
| Ein || B | Jeder Wert kann unabhängig oder zusammen mit anderen in beliebiger Reihenfolge verwendet werden. | Breite || zählen |
| Gruppiert Werte. | [ Zuschneiden || kreuzen ] | |
| * | Null oder mehrmals wiederholen. | [,<время>]* |
| + | Wiederholen Sie dies einmal oder mehrmals. | <число>+ |
| ? | Der angegebene Typ, das Wort oder die Gruppe ist optional. | Einsatz? |
| (A, B) | Wiederholen Sie mindestens A, aber nicht mehr als B-Mal. | <радиус>{1,4} |
| # | Wiederholen Sie dies einmal oder mehrmals, getrennt durch Kommas. | <время># |
Werte
auto Entspricht der durch die text-align-Eigenschaft angegebenen Ausrichtung, mit Ausnahme des justify-Werts. Dafür wird die Ausrichtung wie start sein. start Die Linie wird an der Anfangskante des Blocks ausgerichtet, die sich je nach Textrichtung (von links nach rechts oder von rechts nach links) ändern kann. Ende Die Linie wird an der Endkante des Blocks ausgerichtet, die durch die Richtung des Textes bestimmt wird. left Die Linie wird nach links ausgerichtet. rechts Die Linie wird nach rechts ausgerichtet. center Die Linie ist zentriert. justify Die Zeile wird im Blocksatz ausgerichtet. Wenn in der letzten Zeile nur ein Wort steht, wird es linksbündig ausgerichtet.
Beeinflussen unterschiedliche Bedeutungen Die Position des Textes ist in der Tabelle dargestellt. 1.
| Bedeutung | Ausrichtung | Texttyp |
|---|---|---|
| links | Links | |
| Rechts | Rechts |  |
| Center | Zentriert |  |
| rechtfertigen | Breite |  |
Sandkasten
Winnie Puuh war einer kleinen Erfrischung immer nicht abgeneigt, besonders um elf Uhr morgens, denn zu diesem Zeitpunkt war das Frühstück schon lange zu Ende und das Mittagessen noch nicht begonnen. Und natürlich freute er sich riesig, als er sah, dass der Hase Tassen und Teller herausholte.
div ( text-align-last: start ; )
Beispiel
Objektmodell
Ein Objekt.style.textAlignLast
Notiz
Internet Explorer und Edge unterstützen keine Start- und Endwerte.
Firefox vor Version 49 unterstützt die Eigenschaft -moz-text-align-last.
Spezifikation
Jede Spezifikation durchläuft mehrere Genehmigungsstufen.
- Empfehlung – Die Spezifikation wurde vom W3C genehmigt und wird als Standard empfohlen.
- Kandidatenempfehlung ( Mögliche Empfehlung) – Die für den Standard verantwortliche Gruppe ist davon überzeugt, dass sie ihre Ziele erreicht, benötigt jedoch Hilfe von der Entwicklungsgemeinschaft, um den Standard umzusetzen.
- Vorgeschlagene Empfehlung Vorgeschlagene Empfehlung) – zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
- Arbeitsentwurf – Eine ausgereiftere Version eines Entwurfs, der zur Überprüfung durch die Community diskutiert und geändert wurde.
- Entwurf des Herausgebers ( Redaktioneller Entwurf) – eine Entwurfsversion des Standards, nachdem von den Projektredakteuren Änderungen vorgenommen wurden.
- Entwurf ( Entwurf einer Spezifikation) – die erste Entwurfsversion des Standards.
