Atrybut text-align CSS

Definicja i użycie

Atrybut text-align określa sposób wyrównania tekstu poziomego wewnątrz elementu.

Ta właściwość ustawia sposób wyrównania tekstu wewnątrz elementów blokowych, określając, z którym punktem ramki wiersza jest wyrównany. Pozwala użytkownikowi agentowi dostosować odstępy między literami i słowami w zawartości wiersza, co umożliwia wartość justify; różne użytkownicy agentów mogą uzyskać różne wyniki.

Zobacz również:

Kurs CSS:Tekst CSS

Podręcznik HTML DOM:Atrybut textAlign

Przykład

Ustaw sposób wyrównania tekstu dla elementów h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Spróbuj sam

Gramatyka CSS

text-align: left|right|center|justify|initial|inherit;

Wartość atrybutu

Wartość Opis
left Ustaw tekst na lewo. Domyślna wartość: zależy od przeglądarki.
right Rozkład tekstu na prawo.
center Rozkład tekstu na środek.
justify Realizacja efektu tekstowania两端对齐
inherit Określa, że wartość atrybutu text-align powinna być dziedziczona z atrybutu elementu rodzica.

Wartość justify

Ostatnim atrybutem wyrównania poziomego jest justify, który niesie ze sobą pewne problemy.

Wartość justify może wyrównać oba końce tekstu. W tekście两端对齐, końce wierszy są umieszczane na wewnętrznych krawędziach elementu rodzica. Następnie dostosowuje się odległość między słowami i literami, aby długość każdego wiersza była równa. Może zauważyć, że tekst两端对齐jest powszechny w dziedzinie druku. Jednakże, w CSS, wymaga więcej uwagi.

Określenie, jak proxy (nie CSS) ma określić, jak rozciągać tekst两端对齐, aby wypełnić przestrzeń między lewym i prawym brzegami elementu rodzica. Na przykład, niektóre przeglądarki mogą zwiększać dodatkową przestrzeń między słowami, podczas gdy inne mogą równomiernie rozprowadzać dodatkową przestrzeń między literami (choć specyfikacja CSS szczególnie zauważa, że jeśli Atrybut letter-spacingOkreślona jako wartość długości ("proxy nie może zwiększać ani zmniejszać przestrzeni między znakami"). Niektóre proxy mogą również zmniejszyć przestrzeń niektórych wierszy, aby tekst był bardziej zbliżony. Wszystkie te metody mogą wpłynąć na wygląd elementu, nawet zmienić jego wysokość, w zależności od tego, jak bardzo wybór wyrównania proxy wpływa na liczby wierszy tekstu.

CSS również nie określa, jak przetwarzać myślniki (uwaga 1). Większość tekstów两端对齐text-align używa myślników do rozdzielania długich słów na dwie linie, co zmniejsza przestrzeń między słowami i poprawia wygląd wierszy tekstu. Jednakże, ponieważ CSS nie definiuje zachowania myślników, użytkownik proxy rzadko automatycznie dodaje myślniki. Dlatego tekst两端对齐w CSS wygląda gorzej niż drukowany, zwłaszcza jeśli element jest zbyt wąski, aby na każdej linii zmieścić tylko kilka słów. Oczywiście, można używać wąskich elementów projektowych, ale należy uważać na związane z nimi wady.

Uwaga 1:CSS nie wyjaśnia, jak przetwarzać myślniki, ponieważ różne języki mają różne zasady dotyczące myślników. Norma nie próbuje harmonizować takich prawdopodobnie niekompletnych zasad, ale po prostu nie wspomina o tym problemie.

Szczegółowe informacje techniczne

Domyślna wartość: Jeśli atrybut direction ma wartość ltr, wartość domyślna to left; jeśli direction ma wartość rtl, to right.
Inheritance: tak
Wersja: CSS1
Gramatyka JavaScript: object.style.textAlign="right"

Więcej przykładów

Wyrównanie tekstu
Ten przykład pokazuje, jak wyrównać tekst.

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5