Korzystanie szerokość, max-width i margin: auto;
Jak wspomniano w poprzednim rozdziale; element blokowy zawsze odbywa się w pełni dostępna szerokość (rozciąga się na lewo i prawo o ile to możliwe).
Ustawianie width elementu blokowego będzie uniemożliwić wyciągając do krawędzi jego kontenera. Następnie można ustawić marginesy na auto, aby poziomo wyśrodkować element jego kontenerze. Element odbędzie się na określonej szerokości, a pozostałe miejsca zostaną podzielone równo między dwie marże:
Uwaga: problem z <div> powyżej występuje, gdy okno przeglądarki jest mniejsza od szerokości elementu. Przeglądarka następnie dodaje poziomy pasek przewijania do strony.
Korzystanie max-width zamiast tego, w tej sytuacji, usprawni obsługę przeglądarki, z małymi oknami. Jest to ważne przy podejmowaniu miejsce nadające się na małych urządzeniach:
Wskazówka: Zmiana rozmiaru okna przeglądarki do mniej niż 500px szerokości, aby zobaczyć różnicę między dwoma div!
Oto przykład z dwóch div powyżej:
Przykład
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Spróbuj sam "