`). Po drugie, kod zawierający `
Najczęstsze błędy i jak ich unikać
Nawet doświadczeni deweloperzy czasami popełniają błędy przy centrowaniu. Z mojego doświadczenia wynika, że świadomość tych pułapek jest kluczem do ich unikania. Przyjrzyjmy się najczęstszym z nich.
Błędne użycie `text-align` na elemencie blokowym
Jednym z najczęstszych błędów jest próba użycia `text-align: center;` na elemencie blokowym w celu wyśrodkowania *jego samego*, a nie *jego zawartości*. Pamiętajcie, że `text-align` działa na elementy potomne (tekst, inline, inline-block), a nie na sam kontener. Jeśli macie `
Przykład błędny:
.moj-blok { text-align: center; /* Nie wyśrodkuje samego bloku div */ background-color: lightcoral; height: 50px; width: 200px;
}
Ten kod wyśrodkuje tekst wewnątrz `.moj-blok`, ale nie przesunie samego bloku na środek strony.
Brak zdefiniowanej szerokości dla `margin: auto`
Drugim bardzo powszechnym błędem jest zapominanie o zdefiniowaniu szerokości elementu blokowego, gdy próbujemy go wyśrodkować za pomocą `margin: 0 auto;`. Jak już wspomniałem, element blokowy domyślnie zajmuje 100% dostępnej szerokości. Jeśli zajmuje całą szerokość, nie ma żadnej wolnej przestrzeni do rozłożenia przez `auto` marginesy, więc element pozostaje po lewej stronie (lub po prawej, w zależności od kierunku tekstu).
Przykład błędny:
.moj-blok { margin: 0 auto; /* Nie zadziała bez zdefiniowanej szerokości */ background-color: lightblue; height: 50px;
}
Aby to zadziałało, musicie dodać `width: [jakas_wartosc];`.
Przeczytaj również: Jak stworzyć szablon Allegro HTML? Ograniczenia i skuteczne tricki
Trudności z centrowaniem pionowym bez Flexbox/Grid
Przed erą Flexboxa i Grida, centrowanie w pionie było prawdziwym wyzwaniem. Deweloperzy uciekali się do różnych, często skomplikowanych i mniej elastycznych technik, takich jak:
- Użycie `line-height` równego wysokości elementu (działa tylko dla pojedynczych linii tekstu).
- `display: table-cell` w połączeniu z `vertical-align: middle` (wymaga zmiany modelu wyświetlania).
- Pozycjonowanie absolutne z `top: 50%` i `transform: translateY(-50%)` (wymaga pozycjonowania i może powodować problemy z układem).
