Usare width, max-width e margin:auto;

Come detto nel capitolo precedente, un elemento a livello di blocco prende la larghezza totale disponibile (si estende da sinistra a destra per quanto può).

Impostando la proprietà width di un elemento a livello di blocco si impedirà che si allunghi fino ai bordi del suo contenitore. Quindi, si può impostare i margini col valore auto, per centrare orizzontalmente l'elemento all'interno del suo contenitore. L'elemento assumerà la larghezza specifica, e lo spazio rimanente sarà diviso equamente tra i due margini.

Usando la proprietà max-width invece, in questa situazione, si migliorerà la gestione del browser con finestre di piccole dimensioni. Questo è importante quando si realizza un sito che si usa anche in piccoli dispositivi.

Esempio

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

VISUALIZZA ESEMPIO