Znacie te sytuacje? Element ma się znaleźć na środku innego elementu, jednak treść wypływa poza div. Czcionka nie dopasowuje się do szerokości ekranu. Jeden piksel więcej tu, resztę strony szlag trafia. Stworzyłeś najlepiej dopasowane tło, lub piękną nakładkę, ale każda przeglądarka wyświetla to inaczej.
Co jakiś czas będziemy zamieszczać krótkie instrukcje dotyczące częstych problemów z CSS’em, JavaScript’em, HTML’em, CMS’ami etc. Jak tylko spotka nas coś ciekawego, to zaraz się tu pojawi.
Dzisiaj, wyrównanie elementów w CSS’ie.
Każda sytuacja wymaga co prawda indywidualnego podejścia, ale na szczęście istnieją pewne narzędzia, które nasze życie potrafią znacznie uprościć.
Zamiast przeglądać po raz setny w3schools, warto zajrzeć na howtocenterincss.com. Jest to niezwykle sympatyczne narzędzie, które za rączkę poprowadzi nawet mniej doświadczonych lub zupełnie początkujących web developerów.
Na początek proponuję poczytać o właściwościach takich jak float, position, display, align, padding oraz margin. Zajmie to góra 30 min, a skróci mękę znacząco na przyszłość.
Parę prostych pytań, na które warto sobie odpowiedzieć:
- Jakiego typu element osadzamy na jakim innym? (obraz w divie? tekst w obrazie? etc.) Nie wszystkie atrybuty CSS działają ze wszystkimi elementami. Czasem jedna przeglądarka dopuści dany atrybut, inna nie.
- Czy wyrównanie działa z różnymi szerokościami ekranu? Używaj w miarę możliwości wartości względnych (relative units – %, vh, vw, em, etc). Bezwzględne (absolute units), mogą mieć negatywny wpływ na wygląd przy zmianie wielkości ekranu przez użytkownika. W takich sytuacjach może być konieczne sprecyzowanie różnych wartości dla różnych urządzeń.
- Czy DOM (model obiektów) wymaga wrappera? Czasem elementy, które chcemy względem siebie wyrównać potrzebują elementu nadrzędnego, pełniącego funkcję “obwoluty”. Dzięki temu, możemy dać wrapperowi odpowiedni atrybut display lub position, który pomoże wyrównać zawartość.
Ciężko przecenić stronę howtocenterincss.com. Pozwala na przedstawienie danej sytuacji i otrzymanie odpowiedniego rozwiązania.
Trudno czasem zrozumieć dlaczego nasz CSS zachowuje się tak czy inaczej. Mam nadzieję, że chociaż popchnąłem was w odpowiednim kierunku. Zapraszam do dyskusji w komentarzach.
Następnym razem napiszemy o mykach i trikach, o których pewnie niejeden nie wie. CSS jest potężnym narzędziem, przez wielu niezrozumianym i niedocenianym. Spróbujmy to razem zmienić.