W tym wpisie poznasz kilka sposobów na centrowanie elementów w HTML i CSS.

Nigdy nie było większych problemów z centrowaniem elementów poziomo. Było natomiast sporo tricków związanych z wyrównywaniem pionowym.

Ten wpis będzie podsumowaniem metod wykorzystanych w filmie poniżej:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Centrowanie elementów blokowych

Gdy element jest blokowy, np. <div>, <section>, <p> – wtedy wystarczy ustawić dla niego margines lewy i prawy na “auto”

Pamiętaj, że jeśli taki element rozciąga się na 100% szerokości, to go nie wycentrujesz. Musi mieć swoją szerokość, inaczej centrowanie nie ma sensu.

Centrowanie elementów liniowych

Aby wycentrować element liniowy lub liniowo-blokowy, dla jego rodzica ustaw właściwość:
text-align: center;

Podobnie jeśli chcesz wycentrować tekst w środku jakiegoś elementu. Również zrobisz to za pomocą text-align: center;

Dodatkowo, jeśli wiesz, że tekst będzie w 1 linijce, możesz użyć właściwości line-height, by ręcznie dopasować jego położenie.

Ostatecznie, zawsze może ustawić jego wyświetlanie na blokowe i wtedy wystarczy zastosować lewy i prawy margines (jak powyżej).

Centrowanie za pomocą flexboxa

Flexbox może wydawać się skomplikowany, ale na szczęście nie jest.

Zobacz film powyżej, gdzie pokazuję jak wyglądają osie main axis (oś x) i cross axis (oś y). Na tej podstawie możesz wyrównać (w tym wycentrować) swoje elementy.

Aby wyrównać elementy w main axis (domyślnie oś x), wykorzystaj właściwość justify-content. Żeby zrobić to samo w cross axis (domyślnie oś y), skorzystaj z align-items.

Niczego więcej nie potrzebujesz, by sprawnie centrować elementy. Pamiętaj tylko o tym, że gdy zmieniasz kierunek wyświetlania flexboxa (flex-direction) z row (domyślnie) na column, odwracają się też osie.

Myślę, że znając te metody poradzisz sobie w większości przypadków wyrównywania elementów.

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Dla dopowiedzenia można dodać, że align-items wycentruje wszystkie elementy zawierające się w kontenerze, dla konkretnego elementu można jeszcze dodać align-self:center; Ale to tylko dla uściślenia ;)

  • >