CSS: centrare un elemento in una pagina web
Pubblicato il 5/5/2009 alle 11:14
Per questioni di design o per esigenze particolari 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;
}
Invia questo articolo a un amico via email
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.