W świecie front-endu narosło wiele mitów, które potrafią namieszać w głowie nie tylko początkującym, ale i doświadczonym deweloperom. Jednym z najtrwalszych jest przekonanie, że właściwość text-align: center to przeżytek, którego nie powinno się już używać w nowoczesnym kodzie CSS. Skąd wzięło się to błędne przekonanie i dlaczego wciąż ma się dobrze? Odpowiedź tkwi w pomieszaniu pojęć z zamierzchłych czasów internetu oraz w rewolucji, jaką przyniosły nowe metody układania elementów na stronie.

Winowajca numer jeden: znacznik <center>

Głównym źródłem zamieszania jest fakt, że w dawnych wersjach HTML istniał dedykowany znacznik <center>. Pozwalał on na bardzo proste (choć z dzisiejszej perspektywy mało eleganckie) centrowanie wszystkiego, co znalazło się wewnątrz niego. Wraz z nadejściem standardu HTML 4.01 w 1999 roku, znacznik ten został uznany za przestarzały (deprecated), a deweloperom zalecono rozdzielenie warstwy strukturalnej (HTML) od warstwy prezentacyjnej (CSS).

Wiele osób, słysząc o tym, że „centrowanie w HTML jest martwe”, automatycznie przeniosło tę opinię na właściwość CSS o podobnej nazwie. To klasyczny błąd skojarzeniowy: skoro tag <center> jest zły, to text-align: center pewnie też. Nic bardziej mylnego – to dwa zupełnie inne byty.

Atrybut align="center" i jego upadek

Podobny los spotkał atrybut align, który można było dopisać do niemal każdego elementu, np. <div align="center">. On również został wycofany na rzecz kaskadowych arkuszy stylów. Proces czyszczenia kodu HTML z elementów odpowiedzialnych za wygląd trwał lata, a w międzyczasie w sieci pojawiało się mnóstwo artykułów ostrzegających przed „używaniem metod centrowania z lat 90.”. Dla kogoś, kto czytał te porady pobieżnie, komunikat był prosty: „nie centruj w ten sposób”.

Era Flexboxa i CSS Grid

Kolejnym powodem, dla którego text-align: center zaczął być postrzegany jako coś „starego”, jest pojawienie się nowoczesnych modułów układu, takich jak Flexbox i CSS Grid. Wprowadziły one potężne narzędzia, takie jak justify-content: center czy align-items: center.

Wielu deweloperów zachłysnęło się nowymi możliwościami i zaczęło stosować Flexboxa do wszystkiego – nawet do prostego wyśrodkowania linijki tekstu. W ten sposób text-align: center zaczął być postrzegany jako rozwiązanie „z poprzedniej epoki”, mimo że w określonych scenariuszach jest ono znacznie bardziej wydajne i prostsze w zapisie niż tworzenie kontenera elastycznego.

Ciekawostka: dlaczego text-align czasem „nie działa”?

Częstym powodem frustracji, który podsyca mit o „wadliwości” tej właściwości, jest niezrozumienie, jak ona działa. text-align: center wpływa tylko na zawartość typu inline (jak tekst, obrazki <img> czy elementy <span>) wewnątrz elementu blokowego. Jeśli spróbujesz wyśrodkować za jego pomocą inny element blokowy (np. <div>), nic się nie stanie. To właśnie ten brak efektu często prowadzi do błędnego wniosku, że właściwość jest przestarzała, podczas gdy problemem jest po prostu niewłaściwe jej zastosowanie.

Kiedy text-align: center jest najlepszym wyborem?

Współczesne standardy W3C wcale nie rezygnują z tej właściwości. Wręcz przeciwnie, jest ona podstawowym narzędziem w typografii internetowej. Powinieneś jej używać zawsze, gdy:

• Chcesz wyśrodkować tekst wewnątrz akapitu (<p>).
• Centrujesz nagłówki (<h2>, <h3>).
• Pracujesz z elementami, które naturalnie zachowują się jak tekst (np. ikony fontowe).

Używanie do tych celów Flexboxa to przysłowiowe strzelanie z armaty do muchy. text-align: center jest dziedziczone, co pozwala na łatwe zarządzanie wyglądem całych sekcji tekstu za pomocą jednej reguły w CSS.

Podsumowanie źródła mitu

Mit o przestarzałości text-align: center to efekt „głuchego telefonu” w procesie edukacji webdeweloperów. Połączenie wycofania znacznika <center>, rezygnacji z atrybutów prezentacyjnych w HTML oraz fascynacji nowymi metodami układu (Flex/Grid) stworzyło fałszywe wrażenie, że stare metody CSS odeszły do lamusa. W rzeczywistości text-align: center ma się świetnie i pozostaje niezastąpionym narzędziem w arsenale każdego front-endowca, o ile tylko pamiętamy, że służy do formatowania treści, a nie budowania całej struktury layoutu.