Utilizzando larghezza, max-width e margin: auto;
Come già detto nel capitolo precedente; un elemento di blocco richiede sempre l'intera larghezza disponibile (estende a sinistra ea destra per quanto possibile).
Impostare la width di un elemento di blocco impedisce di stiramento verso i bordi del suo contenitore. Quindi, è possibile impostare i margini per l'auto, per orizzontalmente centrare l'elemento all'interno del suo contenitore. L'elemento assumerà la larghezza specificata, e lo spazio rimanente sarà suddiviso in parti uguali tra i due margini:
Nota: Il problema con il <div> sopra si verifica quando la finestra del browser è minore della larghezza dell'elemento. Il browser quindi aggiunge una barra di scorrimento orizzontale alla pagina.
Utilizzando max-width invece, in questa situazione, migliorerà la gestione del browser di piccole finestre. Questo è importante quando si effettua un sito usabile su piccoli dispositivi:
Suggerimento: Ridimensionare la finestra del browser per meno di 500px di larghezza, per vedere la differenza tra i due div!
Ecco un esempio dei due div sopra:
Esempio
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Prova tu stesso "