JuliusDesign

Centrare un Div in Orizzontale e Verticale – CSS Trick #4

Di - Letture: 8.601

Continua la rubrica su JuliusDesign, CSS Trick in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.

Oggi vediamo insieme come centrare un contenuto in verticale e orizzontale nella nostra pagina web.

Spesso avremmo proprio bisogno di un bel fucile per minacciare il nostro CSS e centrare correttamente i nostri contenuti.

Vediamo come senza armi, ma in modo pacifico possiamo centrare contenuti in orizzontale e verticale in una pagina web.

Centrare un Elemento in Orizzontale

Per centrare un div in orizzontale ci basterà assegnare una larghezza e un margin zero per l’asse delle x e auto per l’asse delle y.

Codice CSS

#contenitore{
width: 100px;
height: 100px;
margin: 0 auto;
}

Centrare un Elemento in Verticale

Per centrare un div in verticale è leggermente diversa la tecnica da usare.

Purtroppo non si puà usare margin: auto auto sarebbe troppo facile e neanche vertical-align in quanto funziona solo con le tabelle, oppure associando a un div table come tipologia di display.

Codice CSS

#contenitore{
background-color: #F3F3F3;
border: 3px dashed #CCCCCC;
height: 18em;
left: 50%;
margin-left: -15em;
margin-top: -9em;
position: absolute;
top: 50%;
width: 30em;
text-align:center;
line-height: 16em;
}

Per centrare questo div id uguale contenitore dovremo, dopo aver assegnato altezza e larghezza, associare una posizione absolute, con top e left in percentuale.

Questa tecnica CSS è compatibile con i browser: Internet Explorer 6+, Firefox, Chrome, Opera, Safari.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Lascia un Mi Piace se non conoscevi questo Trick, o se ti piace la rubrica.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

Chi ha letto questo articolo ha letto anche

17 Commenti

  1. bfred.it

    Fortunatamente esiste un’alternativa che risolve il problema del contenuto non visibile se la finestra è troppo piccola: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ (soluzione #3)

    HTML:
    <div id="floater">
    <div id="content">
    Content here
    </div>
    </div>

    CSS:
    #floater {float:left; height:50%; margin-bottom:-120px;}
    #content {clear:both; height:240px; position:relative;}

    Purtroppo è necessario un secondo elemento, ma è ovviamente meglio un elemento in più di un testo non visibile.

    Cita / Quota
  7. Giuseppe

    @ bfred.it:
    Io già conoscevo questa tecnica, ma il problema é proprio quello che hai segnalato tu! Grazie per questo link, non sapevo ci fosse una soluzione alternativa alla tabella posizionata centralmente in verticale per evitare che parte del sito si cancelli quando la finestra é troppo piccola:D

    Cita / Quota
  8. bfred.it

    @ Giuseppe:
    Prima di trovare la soluzione con il floater utilizzavo min-height sul body, mi pare, per evitare che la finestra diventi troppo piccola, ma il floater funziona meglio ed è più compatibile.

    Cita / Quota
  9. Giuseppe

    @ bfred.it:
    Si infatti, questo é più compatibile di sicuro… lo utilizzerò non appena c’é ne sarà occasione :)

    Cita / Quota
  11. bfred.it

    @ Monica:
    Ci sarebbe il metodo table/table-cell, ma ho avuto parecchi problemi a farlo funzionare ed alla fine ci ho rinunciato. http://blog.themeforest.net/tutorials/vertical-centering-with-css/ (metodo #1)
    Oppure può usare un po’ di javascript con il mio metodo
    //con jquery, al caricamento della pagina
    $(document).ready(function(){

    var altezzaContenuto = $('#content').height();

    //l'ideale è non modificare l'altezza del floater via CSS ma farlo solo se è disponibile il javascript
    $('#floater').css({height:"50%",marginBottom:-altezzaContenuto/2})

    })

    Cita / Quota
  14. Claudio

    @ bfred.it:
    bfred.it ha scritto:

    Fortunatamente esiste un’alternativa che risolve il problema del contenuto non visibile se la finestra è troppo piccola: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ (soluzione #3)HTML: Content here CSS: #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;} Purtroppo è necessario un secondo elemento, ma è ovviamente meglio un elemento in più di un testo non visibile.

    ciao bfred ho provato questa soluzione, ma non mi funziona se non con questa modifica:

    HTML: Content here CSS: #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;}

    cioè mi pare che occorra chiudere il div floater prima di aprire il div content.
    Ho controllato anche al link di riferimento e nell’applicare la regola, spostano appunto il div content al di fuori del div floater.
    Scusate ma sono molto inesperto e mi piacerebbe capire… grazie

    Cita / Quota
  15. Claudio

    Forse ho fatto un po’ di casino, ma non so come inserire i codici html…
    Riprovo ad inserirli:
    Versione di bfred
    HTML:
    <div id="floater"> <div id="content"> Content here </div> </div>
    CSS:
    #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;}

    Versione secondo me corretta

    <div id="floater"> </div> <div id="content"> Content here </div>
    CSS:
    #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;}

    Spero sia giusto… abbiate pietà

    Cita / Quota

Commenti