Folosind lățime, max-lățime și margin: auto;
După cum sa menționat în capitolul anterior; un element de nivel bloc întotdeauna preia întreaga lățime disponibilă (stretches out to the left and right as far as it can) se (stretches out to the left and right as far as it can) la (stretches out to the left and right as far as it can) care (stretches out to the left and right as far as it can) .
Setarea width unui element de nivel bloc va împiedica întinde spre marginile recipientului acestuia. Apoi, puteți seta marginile la auto, pentru a centra orizontal elementul său în interiorul containerului. Elementul va prelua lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini:
Notă: Problema cu <div> de mai sus apare atunci când fereastra browser - ului este mai mică decât lățimea elementului. Browserul adaugă apoi o bară de derulare orizontală a paginii.
Utilizarea max-width în loc, în această situație, se va îmbunătăți manevrabilitatea browser - ului de ferestre mici. Acest lucru este important atunci când se face un site utilizabil pe dispozitive mici:
Sfat: Redimensionarea fereastra browser - ului la mai puțin de 500px largă, pentru a vedea diferența dintre cele două divs!
Aici este un exemplu de cele două divs de mai sus:
Exemplu
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Încearcă - l singur »