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:

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.

Przeczytaj też...

Jak wycentrować elementy w HTML i CSS?
Ocena: 5 - 4 głosów

Jakub Jurkian

<p>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).</p>

2 komentarzy

Marcin3 października 2017, 09:03

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 ;)

Odpowiedz

    Jakub Jurkian3 października 2017, 09:07

    Jasne, dzięki Marcin.
    Flexbox to ogólnie materiał na inny temat, dlatego nie chciałem się szczególnie w to zagłębiać :)

    Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*