Tak jak współżycie bajkowego Pawła i Gawła było burzliwe, tak problematyczne może być ustawienie dwóch wycentrowanych elementów jeden pod drugim.
Niech za przykład posłuży poniższa struktura. Mamy tu element HEADER, a w nim nawigację (NAV) oraz zdjęcie (IMG), np. logo.
<header>
<nav>
<a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a>
<a href="#">menu 4</a>
</nav>
<img src="http://kawalekkodu.pl/bl-themes/skeleton/img/kawalek_kodu.png" />
</header>
+
header {
text-align: center;
}
nav {
background: #ff0;
}
Efekt mamy taki:
Niby ok, ale chcieliśmy, aby tło nawigacji obejmowało tylko linki, a nie całość elementu. Najzwyczajniej aby element nie zajmował całej dostępnej przestrzeni. Dodajmy więc float:left do nawigacji, aby ta nabrała bardziej kompaktowej szerokości.
Lipa. Co prawda float:left rzeczywiście spowodowało, że szerokość elementu (i tło) dopasowało się do zawartości, ale zdjęcie ustawiło się za nawigacją, a ta przykleiła się do lewej krawędzi.
To może BR?!
Jak nie urok to... teraz logo co prawda spadło niżej, ale nawigacja wciąż czepia się lewej strony.
Zaraz zaraz, ale można zamienić nawigację w element inline-block. Domyślnie jest elementem blokowym, więc zmuśmy ją trochę do przebierania.
No, super-ekstra, ale jest tam BR, nasz tytułowy antybohater, którego przecież chcemy się pozbyć... Spróbujmy bez niego.
Witki opadają. Oczywiście, że BR zniknął skoro go usunęliśmy, ale elementy przy dużej szerokości, kiedy mieszczą się w jednej linii, ustawiają się obok siebie. Błędne koło!
Skoro, block nie, inline-block również nie, to może inline? Sprawdź sam, bo nawet szkoda pisać.
Jest jednak inne rozwiązanie, które uwolni nas od ciemiężcy BR. Nadajmy nawigacji styl table.
Aaaaaa! Przecież to wygląda tak samo jak próba z float i BR! A czy tam pomagało nadanie margin:0 auto? Nie....
A tu?
Hura!
Nie pozostaje nic innego jak napisać na tablicy 100 razy: Tam gdzie nie trzeba, nie będe pchał BR, a użyję display:table.