Mroczna przeszłość HTML: Zapomnij o tagu ``

W początkach web developmentu istniał tag

Używanie tagu

• Brak zgodności ze standardami: Nie jest to już validny HTML, co może prowadzić do problemów z renderowaniem w przyszłych przeglądarkach lub narzędziach.
• Problemy z utrzymaniem kodu: Mieszanie stylów w HTML utrudnia globalne zmiany. Jeśli zdecydujesz się zmienić sposób centrowania na całej stronie, musisz edytować każdy tag , zamiast jednej reguły CSS.
• Gorsza dostępność: Przestarzałe tagi mogą być gorzej interpretowane przez czytniki ekranowe i inne technologie wspomagające.
• Brak elastyczności: oferuje tylko podstawowe centrowanie poziome i nie daje żadnej kontroli nad innymi aspektami układu.

Jeśli natrafisz na stary kod z tagiem

 
Ten tekst jest wyśrodkowany starym tagiem.
 
 
Ten tekst jest wyśrodkowany za pomocą CSS.
 
 
Ten blok jest wyśrodkowany za pomocą margin.

Pełna kontrola w obu osiach: Centrowanie z CSS Flexbox

CSS Flexbox to potężne narzędzie do układania elementów, które rewolucjonizuje sposób, w jaki myślimy o layoutach. Został zaprojektowany do układania elementów w jednym wymiarze wierszu lub kolumnie i zarządzania przestrzenią między nimi. Kluczem do jego działania jest ustawienie właściwości display: flex; na elemencie nadrzędnym (kontenerze), co przekształca jego bezpośrednie dzieci w elementy flex.

Gdy masz już kontener flex, możesz użyć justify-content: center;, aby wyśrodkować jego elementy potomne wzdłuż osi głównej Flexboxa. Domyślnie oś główna jest pozioma, więc ta właściwość wyśrodkuje elementy horyzontalnie.

.container { display: flex; justify-content: center; /* Centruje elementy w poziomie */
}

Aby wyśrodkować elementy wzdłuż osi poprzecznej (domyślnie pionowej), użyj align-items: center;. Tutaj bardzo ważna uwaga: aby centrowanie w pionie było widoczne, kontener nadrzędny musi mieć zdefiniowaną wysokość. Bez wysokości, nie ma "przestrzeni", w której elementy mogłyby być centrowane.

.container { display: flex; height: 200px; /* Niezbędne do centrowania w pionie */ align-items: center; /* Centruje elementy w pionie */
}

Oto kompletny przykład kodu HTML i CSS, który wykorzystuje Flexbox do wyśrodkowania tekstu (lub dowolnego elementu potomnego) zarówno w pionie, jak i w poziomie wewnątrz kontenera.

 
 
Ten tekst jest idealnie wyśrodkowany w pionie i poziomie dzięki Flexbox.
 
 

CSS Grid: Najszybszy sposób na idealny środek

CSS Grid to kolejne, obok Flexboxa, potężne narzędzie do tworzenia układów, ale z kluczową różnicą: Grid jest przeznaczony do układów dwuwymiarowych (wiersze i kolumny), podczas gdy Flexbox do jednowymiarowych. W kontekście centrowania, Grid jest szczególnie efektywny, gdy potrzebujemy błyskawicznego wyśrodkowania elementu w obu osiach, często dla pojedynczych elementów w bardziej złożonym układzie. Moim zdaniem, do prostego centrowania w obu osiach, Grid oferuje najbardziej zwięzłe i eleganckie rozwiązanie.

Wykorzystując display: grid; na kontenerze nadrzędnym w połączeniu z właściwością place-items: center;, możemy błyskawicznie wyśrodkować element potomny zarówno w pionie, jak i w poziomie. Właściwość place-items to skrót dla align-items i justify-items, co czyni ją niezwykle wygodną.

.container { display: grid; place-items: center; /* Centruje w pionie i poziomie jednym poleceniem */ height: 100vh; /* Przykład: kontener na całą wysokość widoku */
}

Poniżej przykład użycia CSS Grid do wyśrodkowania tekstu (nagłówka) na tle obrazka, umieszczonego w kontenerze. Zwróć uwagę na prostotę kodu CSS!

 
Witaj w świecie CSS Grid!
 

Centrowanie całego bloku, nie tylko tekstu

To jest kluczowa różnica, którą często widzę, że początkujący mylą. Centrowanie tekstu (treści inline) wewnątrz elementu blokowego to jedno, a centrowanie samego elementu blokowego w jego kontenerze nadrzędnym to zupełnie inna sprawa. Jeśli masz

 
 
Ten blok jest wyśrodkowany poziomo.
 
 

.centered-block { width: 60%; margin-inline: auto; /* Nowoczesna alternatywa dla margin: 0 auto; */
}