Per questioni di design o altro può capitarci di dover centrare un elemento in una pagina web. Vediamo come centrare un div contenente un’immagine 250px per 100px.
<div id=”content”>
<img src=”immagine.jpg” />
</div>
Per centrare orizzontalmente:
#content {
width: 200px;
margin:auto;
}
Per centrare orizzontalmente e verticalmente:
#content {
display:block;
width:200px;
height:150px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -75px;
}
Volendo fare i pignoli la definizione:
margin: auto;
non è corretta, in quanto la sintassi accetta il valore auto solamente per destra e sinistra.
Quindi la versione corretta dovrebbe essere:
margin: 0 auto 0 auto;
Poi alla fine i browser spesso sono di bocca buona 🙂
Scusa se ho rotto!
Ciao Merlinox, bentornato “dalle mie parti” 😉
Dovrei dire che sei pignolo? Non lo dico. Aggiungo che in questo mestiere essere “pignoli” è una qualità importante…
quindi vada per margin: 0 auto 0 auto; 😉
Ultimamente riuscire anche a leggervi tutto è un vero casino. Purtroppo riesco solo ogni tanto a scorrere i titoli. Lo so che non va bene, ma di meglio non riesco.
Per quanto riguarda il margin l’ho sempre usato anch’io come dicevi te, finchè non ho dovuto uccidermi contro la legge Stanca (accessibilità).
E lì la verifica XHTML è obbligatoria.