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.

Letture Consigliate per CSS Trick

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.