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.
Scrivi un commento da Facebook