posted on
Friday, April 21, 2006 8:30 PM
Inauguro il mio blog con un tip di CSS: come si fa per posizionare un div al centro della pagina?
Tutti conoscono la metodologia basata su tabelle al 100% con i contenuti centrati al loro interno.
Ma come si fa per centrare un contenuto usando una struttura a soli div?
Ovviamente non essendo un metodo standard IE e Firefox si comporano in maniera differente.
Iniziamo da Firefox:
*>div.centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 250px;
height: 150px;
margin: auto;
}
In pratica si tratta di posizionare il div dandogli tutti i margini ad "auto" e dimensionando il div da centrare in maniera assoluta.
Invece con IE si deve usare un'approccio differente:
bisogna posizionare il div al centro della pagina (con top e left a 50%) e poi dargli un margine negativo di metà della dimensione del div.
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -120px;
}
Combinando entrambi gli snippet (attenzione, prima mettete nel foglio di stile il pezzo per IE e poi quello per Firefox) si ottiene una pagina con un contenuto centrato.