Centrare un box con larghezza dichiarata è molto semplice, in quanto richiede soltanto l'impostazione dei margini laterali come automatici. Centrare invece un box privo di larghezza richiede un piccolo ragionamento in più. Vediamo quale.
Esistono due valori per gli elementi di blocco:
blockinline-block
Il primo richiede una larghezza dichiarata per la centratura, mentre il secondo, in quanto ibrido, vuole semplicemente che il suo genitore abbia il valore center impostato per la proprietà text-align.
Quindi possiamo usare questo secondo valore:
#container {
margin: 1em;
text-align: center;
}
#center {
background: silver;
display: inline-block;
padding: 1em;
text-align: left;
}
Nota
Internet Explorer 8 supporta il valore inline-block. Le versioni precedenti non lo supportano, ma essendo queste ultime scese a valori insignificanti nel mercato dei browser, possiamo tranquillamente ignorarle e scrivere codice finalmente standard.
Potete visionare l'esempio finale in questa pagina.