Pubblicato da: Max
In data:
23 Dic 2021
Tempo di lettura:
Ciao! Oggi ti mostro come faccio a centrare ogni elemento all’interno di una pagina web, utilizzando solo una riga di CSS.
Iniziamo subito creando i soliti 2 file che utilizziamo in ogni tutorial: index.html e style.css
In index.html impostiamo la pagina minima html.
In style.css inseriamo le impostazioni di base:
Resettiamo margini e padding, e assegniamo a tutti gli elementi,(tramite il selettore universale *), la dichiarazione box-sizig:border-box;
Creiamo un div con classe container, poi passiamo al foglio di stile e gli assegniamo le proprietà e i rispettivi valori.
Creiamo un altro contenitore con classe contenuto, all’interno del container.
Nel foglio di stile, gli assegniamo un bordo, un’altezza e una larghezza.
Visualizzandolo sul browser, ci accorgiamo che viene posizionato in alto a sinistra subito dopo l’h1, segue quindi il normale flusso della pagina.
Ma noi vogliamo posizionarlo al centro del suo contenitore(container), ecco cosa faremo:
Creiamo la classe centra, l’ assegniamo al contenuto, e nella regola di stile, diamo le seguenti dichiarazioni:
position:relative;
top:50%;
left:50%;
Il box contenuto, si sposta del 50% da sinistra a dall’alto(minuto 1.36 del video sotto).
Ecco la MAGIA!
Inseriamo nella regola con selettore centra, la seguente dichiarazione:
transform:translate(-50%, -50%);
E immediatamente il box contenuto si allinea perfettamente al centro, sia orizzontalmente che verticalmente del suo contenitore container.
A questo punto, possiamo utilizzare la classe centra in ogni elemento della nostra pagina.
Con questo abbiamo concluso! Spero che il video-tutorial ti possa essere utile per i tuoi progetti.
Per scaricare i file che abbiamo utilizzato in questo articolo, clicca su Download e dopo decomprimi il file Zip.
Ecco il video-tutorial completo
Ciao alla prossima! 🙂
