Przeskocz do treści

Wyśrodkowanie elementów na stronie WWW


Robiąc strony internetowe często spotykam się z elementem wyśrodkowanym wewnątrz innego elementu. Najczęściej są to zdjęcia i buttony. W tym krótkim wpisie pokażę wam, jak rozwiązuję ten problem.

Kiedy element ma stały rozmiar

Trochę podstaw. Ustawienie pozycji elementu nadrzędnego na relative, a podrzędnego na absolute sprawia, że współrzędne wszystkich elementów w kontenerze są liczone od lewego górnego rogu kontenera. Dodatkowo, by uzyskać środek dziecka na środku rodzica musimy przesunąć to wszystko o dokładnie połowę w górę i w lewo. Dlaczego tak? Otóż pozycja jest liczona od rogu (góra, lewo). Jeśli nie przesuniemy wszystkiego, to atrybut top i left ustawią nam na środku właśnie róg elementu podrzędnego, a nie jego środek. Zresztą polecam eksperymenty z marginesami i położeniami, może odkryjecie coś ciekawego.

Wyśrodkowanie elementów o zmiennych rozmiarach

Jak widzicie, nie zmieniło się za wiele. Kod HTML pozostaje ten sam, a marginesy zastąpiłem dynamicznym przesunięciem za pomocą atrybutu transform, którego wartość wylicza funkcja translate odpowiedzialna za przesunięcie 2D.

Nieznane wymiary elementu

Chyba każdy koder HTML i CSS wie, że najlepiej wyśrodkowują się elementy w tabeli. Dzięki odpowiednim wartościom atrybutu display możemy wymusić zachowanie elementów kodu jako części tabeli. Najlepiej jednak zobrazuje to przykład.

Jak widać, został tutaj zastosowany dodatkowy pojemnik wrapper z wymuszonym zachowaniem jako tabela. W nim umieściłem kolejny pojemnik, który ma wymuszone zachowanie jako komórki tabeli. Dzięki temu rozwiązaniu możemy śmiało wyśrodkowywać elementy zarówno w pionie jak i w poziomie, niezależnie od ich wymiarów.

Pamiętać jednak należy o tym, że:

  • musimy wymusić zachowanie kontenera jako tabeli, a elementu jako komórki tabeli
  • przy elementach nie możemy ustawić atrybutu float, bo będą traktowane jako bloki

Zakończenie

Mam nadzieję, że te trzy przykłady pozwolą wam w prostszy sposób zapanować wyśrodkowaniem elementów na waszych stronach. Ja sam podpatrzyłem je jakiś czas temu u Piotra Nalepy.


Dodaj komentarz

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