C’è un modo per centrare il testo e le immagine all’interno di una pagina, indipendentemente dalla risoluzione del monitor o dalla grandezza della finestra del browser dell’utente.
Per centrare tutto il contenuto della pagina bisogna introdurre un DIV container nel quale viene introdotto tutto il contenuto della pagina: inizia subito dopo aver aperto i tag body e finisce subito prima di chiudere il tag body.
Il DIV viene formattato con la classe “centrato”, in cui si definisce la posizione assoluta del DIV, la sua larghezza e la sua altezza. Se si vuole centrare il contenuto orizzontalmente si definisce il parametro “left” a 50% e il parametro “margin-left” alla metà negativa della larghezza del DIV. Con questo si fa in modo che il contenuto della pagina rimanga perfettamente centrato anche nel caso che venga variata la dimensione della finestra del browser.
Lo stesso vale nel caso si volesse centrare verticalmente il contenuto della pagina usando i parametri “top” e “margin-top”.
.centrato{
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
}
Articoli correlati: