Immagine tramite DIV esattamente al centro pagina.

**violaf** · 22-12-2011, 03:06

Indipendentemente dalla risoluzione grafica, come si fa a posizionare un immagine al centro della pagina? Giusto nel centro?

Ho provato con queste due soluzioni (vedi sotto) ma l'immagine mi esce si al centro rispetto a left and right, pero' rispetto top e bottom non mi esce proprio al centro, mi esce un po' spostata verso il basso. So che giocando con i px posso metterla al centro, pero' devo andare ad occhio.

C'e' un instruzione che mi assicura che l'immagine mi esce al 100% al centro indipendentemente dalla risoluzione del monitor e indipendentemente dalla grandezza dell immagine?. Ho anche usato un immagine png, quindi senza bordi attorno.

Grazie

Questi sono i css che ho provato. L'immagine ho inserita all'interno di un DIV. Forse e' questo l'errore? Il div mi sposta l'immagine?????

{
position:absolute;
width:100%;
top:50%;
left:50%;
margin-height: -200px;
max-height: 400px;
}

oppure

{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

nessuna dei due funziona come io voglio

**Mich_** · 22-12-2011, 10:11

Attenzione che ambedue i metodi contengono errori ed imperfezioni.

Inoltre occorre definire le dimensioni del blocco contenitore, altrimenti le % non sono definite.

Esempio:

codice:

HTML:
<html>
  ....
  <body>
    <div id="container">
      <img ... />
    </div>
  </body>
</html>


CSS:
html, body {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
#container img {
  position: absolute;    /* trasforma anche in blocco */
  top: 50%;             /* la meta` del contenitore
  left: 50%;
  width: 800px;          /* vanno definite */
  height: 400px; 
  margin-top: -200px;   /* la meta` della dimensione */
  margin-left: -400px;
}

Le dimensioni dell'immagine vanno definite: essendo immagini probabilmente vanno definite in px (ma qualsiasi unita` di misura e` valida, purche` sia coerente con il resto).

**violaf** · 22-12-2011, 10:39

mitico, grande, grazie

Discussione: Immagine tramite DIV esattamente al centro pagina.

Strumenti discussione

Ricerca discussione

Visualizza

Immagine tramite DIV esattamente al centro pagina.

Permessi di invio