Jak wyśrodkować tekst w HTML? Metody CSS i przykłady

Ten tekst znajduje się na środku.

To rozwiązanie jest zwykle najlepszym wyborem dla pojedynczego akapitu lub nagłówka. Nie zmienia szerokości elementu, tylko ustawia jego tekst względem dostępnego obszaru.

Możesz zastosować regułę do całego kontenera, jeśli wszystkie znajdujące się w nim elementy mają być wyrównane w ten sam sposób.

.naglowek {
  text-align: center;
}

.naglowek h2,
.naglowek p {
  text-align: center;
}

Wersja bezpośrednio w HTML

Doraźnie zadziała również styl wpisany w atrybucie style:

Wyśrodkowany akapit

Sam używam tej formy tylko do szybkiego testu. W większym projekcie lepiej przenieść regułę do arkusza CSS, ponieważ łatwiej ją później zmienić i utrzymać porządek w kodzie.

Czym różni się centrowanie tekstu od centrowania elementu

To jedno z najczęstszych nieporozumień. text-align centruje tekst i elementy liniowe wewnątrz kontenera, natomiast margin: 0 auto centruje sam element blokowy, na przykład pudełko o określonej szerokości.

  
Tekst wewnątrz wyśrodkowanego bloku

W tym przykładzie margin: 0 auto ustawia cały blok na środku strony, a text-align: center centruje napis w jego wnętrzu. Potrzebne są obie właściwości, ponieważ rozwiązują dwa różne problemy.

Stała szerokość, taka jak 420px, nie zawsze sprawdzi się na telefonie. Bezpieczniej użyć ograniczenia szerokości i wartości względnej:

.box {
  width: min(90%, 420px);
  margin: 0 auto;
  text-align: center;
}

Dzięki temu kontener nie wyjdzie poza ekran, a jednocześnie nie rozciągnie się nadmiernie na dużym monitorze. W praktyce właśnie brak ograniczenia szerokości albo zbyt sztywna wartość w pikselach odpowiada za wiele problemów z wyglądem mobilnej strony.

Jak wyśrodkować tekst w pionie i poziomie

Jeśli napis ma znaleźć się dokładnie w środku prostokąta, samo text-align nie wystarczy. Najwygodniej wykorzystać Flexbox, czyli model układu CSS przeznaczony między innymi do ustawiania elementów względem osi poziomej i pionowej.

  
Tekst jest centralnie w panelu

justify-content: center centruje zawartość na osi głównej, a align-items: center ustawia ją na osi poprzecznej. Przy domyślnym kierunku Flexboxa daje to wyśrodkowanie w dwóch wymiarach.

Wysokość kontenera ma tu znaczenie. Jeżeli panel nie ma wysokości, jego zawartość nie będzie miała wolnej przestrzeni do ustawienia w pionie. Dlatego stosuję na przykład min-height, wysokość w jednostkach viewportu albo wysokość wynikającą z układu rodzica.

Centrowanie jednego elementu za pomocą siatki CSS

Do pojedynczego elementu dobrze nadaje się także CSS Grid. Zapis jest krótszy, a intencja bardzo czytelna:

.panel {
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
}

place-items: center łączy ustawienie elementu w pionie i poziomie. Ja wybieram Grid przy prostym, pojedynczym centrowaniu, a Flexbox wtedy, gdy kontener zawiera kilka elementów lub wymaga dodatkowego układania ich w wierszu albo kolumnie.

Którą metodę wybrać w konkretnej sytuacji

Nie ma potrzeby używać Flexboxa do każdego nagłówka. Metoda powinna wynikać z tego, co faktycznie chcesz ustawić, ponieważ nadmiar reguł CSS utrudnia późniejsze poprawki.

Najprostsza zasada wygląda więc tak: tekst poziomo oznacza text-align, a element w centrum całego obszaru zwykle wymaga Flexboxa albo Grida. Dzięki temu nie próbujesz naprawiać układu przypadkowymi marginesami.

Typowe błędy, przez które tekst nie jest na środku

Użycie margin auto do zwykłego tekstu

Reguła margin: 0 auto nie wyrówna liter w akapicie. Może wyśrodkować sam element, ale tekst pozostanie domyślnie wyrównany do lewej, chyba że dodasz również text-align: center.

Brak wysokości przy centrowaniu pionowym

Flexbox nie stworzy wolnej przestrzeni z niczego. Jeśli kontener ma wysokość równą wysokości tekstu, efekt centrowania pionowego będzie niewidoczny. Ustaw min-height, wysokość albo sprawdź, czy rodzic przekazuje odpowiedni rozmiar.

Próba centrowania przez spacje i znaczniki br

Dodawanie spacji, wielu znaków lub kilku
może chwilowo przesunąć napis, ale rozpadnie się przy zmianie szerokości ekranu. To nie jest układ responsywny, tylko ręczne maskowanie problemu.

Przestarzały znacznik center

Ten zapis jest przestarzały

Znacznik

Przeczytaj również: Jak edytować plik HTML: proste metody, które ułatwią pracę

Konflikt z inną regułą CSS

Jeśli text-align: center nie działa, sprawdź, czy późniejsza reguła albo bardziej szczegółowy selektor nie ustawia text-align: left. Pomocne jest też upewnienie się, że styl dotyczy właściwego elementu, a nie jego rodzica lub sąsiada.

Jak sprawdzić efekt na stronie responsywnej

Po dodaniu stylu zmniejsz szerokość okna przeglądarki albo otwórz narzędzia deweloperskie i włącz widok telefonu. Tekst może być centralnie ustawiony, ale jednocześnie wyglądać źle, gdy linie są zbyt długie, kontener nie ma marginesów lub napis wychodzi poza ekran.

Dla dłuższych akapitów nie przesadzam z centrowaniem. Wyśrodkowany krótki nagłówek zwykle wygląda dobrze, natomiast wieloakapitowy tekst wyrównany do środka jest trudniejszy do czytania, szczególnie na smartfonie.

<.content width: min margin: auto .content h2 text-align: center p left>