Centriamo un elemento

Necessitiamo spesso, ma anzi, direi quasi sempre, di centrare un elemento nello spazio orizzontale di una riga o di una pagina.
A seconda dell’elemento che dobbiamo centrare, possiamo usare diversi sistemi.
Per esempio se possiamo suddividere proporzionalmente lo spazio orizzontale, si potrebbe ricorrere a un trucco tipo “bootstrap”.
Dividere cioè lo spazio in un numero dispari di elementi e poi posizionare quello che ci serve nell’elemento centrale… ma mica si può sempre ricorrere a questo o altri sotterfugi.

Passiamo quindi a gestire il posizionamento attraverso l’uso dei margini.

Sfruttiamo la capacità del nostro navigatore di “calcolare” le dimensioni degli elementi di una pagina e di posizionarli adeguatamente.
Ogni oggetto, nella nostra pagina, è racchiuso dentro ad un ipotetico box, che dispone di un margine per lato, cosi da poter essere distanziato da altri oggetti che lo circondino.

Tralasciamo per ora il margine superiore e quello inferiore, che saranno oggetto di un altro articolo, ma ragioniamo sui margini destro e sinistro.
Non posso effettuare un posizionamento manuale, indicando la misura che l’oggetto deve tenere dai bordi laterali, perchè la pagina potrebbe essere ridimensionata.
Allora sfrutto le proprietà “margin-left” e “magin-right”, impostandole in modo “auto”, cosi che la distanza venga ricalcolata ogni volta dal compilatore.
Ricordiamoci anche di indicare (non sempre è necessaria) la larghezza del contenitore esterno del nostro oggetto.

#centrato {
   margin-left:auto;
   margin-right:auto;
   width:800px;
}

Nell’esempio ho usato un “ID”, ma si può indifferentemtne usare una “class”.

Nell’esempio è stata usata la scrittura più estesa, cioè sono state riportate le die proprietà margin-left e margin-right, ma si poteva usare anche la stesura abbreviata:

#centrato {
   margin : 0 auto;
   width:800px;
}

Nel caso fosse necessario specificare un valore differente per le proprietà top e bottom, si poteva scrivere anche:

#centrato {
   margin : 50 auto 30 ;
   width:800px;
}

Ricordiamoci l’ordine di posizionamento delle diverse proprietà del comando “margin”…

margin : <top> <right> <bottom> <left> ;