centrare verticalmente un div in modo intelligente

**nourdine** · 05-12-2005, 12:52

ciao! allora:

se ho un <div class=A> dentro un'altro, diciamo <div class=B>, allora per centrare orizzontalmente A rispetto a B faccio faccio uno stile tipo:

.A (...;
...;
margin-left: auto;
margin-right: auto;
...;
...;
)

se invece voglio centrarlo in senso verticale che c**** devo fare??????????

**floyd46** · 05-12-2005, 13:08

ciao
1)innanzitutto non credo ci sia bisogno di inc*****si;
2)ci sarebbe da studiare i CSS per bene;
3)se conosci l'altezza del primo contenitore (per esempio A) e vuoi mettere un altro al suo interno (per esempio B), prova a dare i margini a B, in modo tale che sia equidistante al top ed al bottom), oppure dare il padding ad A (stesso principio del margin).
Floyd

**nuky** · 05-12-2005, 13:09

Non so se ci sono metodi migliori, ma io faccio così:

Posiziono il div al centro del contenitore mettendo position:relative; top:metà dell'altezza; left:metà della larghezza;.

Poi lo sposto con i margin in alto per la metà della sua altezza e a sinistra per la metà della sua larghezza.

codice:

<html>
  <head>
    <style>
      #div1 {border:1px solid red; width:600px; height:600px;
             padding-left:50%; padding-top:50%;}
      #div2 {border:1px solid blue; width:200px; height:400px;
             margin:-200 0 0 -100;}
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div2"></div>
    </div>
  </body>
</html>

Edit:
No, è un po' che non lo faccio, come avevo postato non era un metodo furbissimo.
Il div interno lo si centra mettendo il padding left e top al 50% nel contenitore.

Discussione: centrare verticalmente un div in modo intelligente

Strumenti discussione

Ricerca discussione

Visualizza

centrare verticalmente un div in modo intelligente

Re: centrare verticalmente un div in modo intelligente

Permessi di invio