I TUTORIAL PIU' LETTI

GIF ANIMATE

Script Gratis!

Spot

www.sassidesign.it
Centinaia di tutorial e corsi online sulla programmazione web completamente gratuiti

Sito Service
Tutorial per realizzare un sito web partendo da zero e script Asp per Aruba Server.

Tutorials & scripts
Articoli su HTML, CSS, PHP, ASP, Javascript, MySQL a cura di AG web solutions!

Oltre 200 Giochi
Al Casinò Spin Palace giochi gratis e vinci soldi veri alle Roulette, Video Poker, Slot Machines, Blackjack, e Dadi

Cerca con Google

Programmazione Web » Css » Posizionare un div al centro dello schermo

Posizionare un div al centro dello schermo

Difficoltà: Apprendista Scritto da Michele Sassi
Sito Web: E-Mail
Questo tutorial è stato letto 688 volte


Il posizionamento di un div al centro dello schermo non causa problemi tecnici al sito, ma ne fa perdere molto di estetica!

Poichè sappiamo benissimo che anche l'occhio vuole la sua parte cerchiamo di capire come posizionare un div nel centro della pagina, sia orizzontalmente (e questo lo sappiamo fare tutti), sia verticalmente!

La cosa più importante che andremo a realizzare è che il box che creeremo sarà posizionato al centro dello schermo, indipendentemente dalla risoluzione usata!
Quindi sia l'utente che naviga con lo schermo impostato su 800x600 che quello che naviga a 1024x768 ecc... riusciranno a vedere i contenuti al centro dello schermo!
Per fare questo però, occorre sapere a priori quali sono le dimensioni del box!

Innanzitutto cominciamo col creare un livello contenitore (che sarà quello che andremo a centrare) chiamandolo "container".

<div id="container">
All'interno di questo div e' possibile annidare altri div, creare tabelle, inserire immagini e quant'altro.
</div>

Successivamente passiamo all'inserimento tra gli <head> del codice Css che ci permetterà il posizionamento del div:

<style type="text/css">
body {
background-color: #FFCC66;
}
div#container {
position:absolute;
top:50%;
left:50%;
width:550px;
height:400px;
margin-left:-275px;
margin-top: -200px;

color:#000;
font-weight:bold;
padding:0;
background-color:#fff;
}
</style>

Come potete ben osservare, le linee più interessanti di questo codice sono state scritte in grassetto.
Sostanzialmente possiamo dire che il livello chiamato "container" largo 550px e alto 400px è stato posizionato in maniera assoluta staccandosi del 50% sia dall'alto che da sinistra.

E' fondamentale, ai fini dell'effetto desiderato, che la proprietà margin-left abbia come valore il negativo della metà della proprietà width (550; -275) e che la proprietà margin-top abbia come valore il negativo della metà della proprietà height (400; -200).

Aggiungi questo tutorial ai preferiti! Aggiungi questo tutorial ai preferiti