:::: MENU ::::

Centrare un DIV in verticale e orizzontale

Spesso ci capita di dover centrare degli elementi contenuti all’interno di un <div> più grande e di dimensioni prefissate. Sappiamo che se utilizziamo l’attributo margin: 0 auto; l’oggetto viene centrato in orizzontale. Scrivere margin: 0 auto; equivale a dichiarare:

Tuttavia, questo metodo non centra l’oggetto contenuto nel <div> in verticale. In realtà, anche utilizzando margin-top: auto e margin-bottom: auto, non risolveremmo un bel niente. 

Per risolvere questo piccolo grande problema, ci viene in aiuto un trucchetto che permette di risolvere il problema. Vedremo come centrare l’oggetto in verticale e in orizzontale relativamente alla pagina, quindi al tag <body>. Per fare questo, occorre definire un #ID nel nostro foglio di stile come di seguito specificato:

e poi applicarlo al tag <div>

Con lo stesso meccanismo, possiamo centrare un <div> all’interno di un altro <div>, ma sarà necessario specificare delle dimensioni prefissate sia in altezza che in larghezza anche per il <div> più esterno.

e quindi, in html, scriveremo:

Semplice, no?


Comments are closed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close