Press "Enter" to skip to content

CSS: centrare un elemento in una pagina web

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;
}

Condividi l'articolo con i tuoi amici
  1. 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!

  2. 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; 😉

  3. 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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.