47 consigli e trucchi CSS. #03: Centrare elementi Block

Il posizionamento si usa per centrare in verticale/orizzontale elementi di tipo Block

HTML:

1. <div id=”content”>your content here</div>

CSS:

1. div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

L’angolo in alto a sinistra si posizionera’ a 50% dal top. Siccome vogliamo che il centro della div sia posizionata a meta’ misura dal top, settiamo un valore negativo per margin-top, uguale a meta’ dell’altezza della div.

Questo trucchetto funziona anche per centrare in orizzontale, Cambia “top” a “left” e “margin-top” a “margin-left” e setta il valore negativo del margin a meta’ della misura dell’elemento.
Il seguente esempio CSS centrera’ l’elemento sia in verticale che in orizzontale.

1. div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}

Ti e’ stato utile questo post? Lascia un commento…..