text-align
Wyrównuje tekst w poziomie: do lewej, do prawej, do środka lub do obu krawędzi.
- Wartość domyślna
start- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- kontenery blokowe
- JavaScript
element.style.textAlign = "center"
Przykład
#.cta {
text-align: center;
}<section class="cta stage" style="text-align: center;">
<h2 style="margin: 0">Gotowy na pierwszą lekcję?</h2>
<p style="margin: 6px 0 12px">Zacznij za darmo, bez karty płatniczej.</p>
<button type="button">Zacznij teraz</button>
</section>Definicja i zastosowanie
#Właściwość text-align ustawia poziome wyrównanie zawartości liniowej w bloku: tekstu, linków, obrazków w linii i elementów inline-block. Nie przesuwa samego bloku, tylko to, co jest w nim w liniach.
Wartości start i end zależą od kierunku pisania: w polskim start oznacza lewą stronę, a w arabskim prawą. Dzięki temu układ sam dopasowuje się do języka. justify rozciąga linie tak, żeby dotykały obu krawędzi.
Do wyśrodkowania bloku (a nie tekstu w nim) służą marginesy auto albo Flexbox i Grid.
Składnia
#text-align: start | end | left | right | center | justify;Wartości
#Wartości w praktyce
#start
.demo { text-align: start; }center
.demo { text-align: center; }end
.demo { text-align: end; }justify
.demo { text-align: justify; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Długie akapity wyrównuj do lewej. Tekst wyśrodkowany i wyjustowany czyta się trudniej, a justowanie tworzy dziury między wyrazami.
- Używaj
startiendzamiastleftiright, jeśli strona ma wersje w językach pisanych od prawej.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.