Centrare verticalmente un DIV dentro un DIV più alto

[amamax]

Ciao ragazzi,

ho un DIV (che magari contiene testo e immagini) che vorrei centrare verticalmente in un DIV più alto (ovviamente).

Sapete come posso? Di default il div interno è allineato in modo TOP, vorrei appunto allinearlo in modo middle... avete un codice che risolve?

[Prill]

In maniera semplice: usando display table e table-cell sui div e assegnando un vertical-align: middle. Per Internet Explorer 7 e 6 che non supportano queste proprietà si può ricorrere a vari espedienti, il più veloce, avendo tu solo un div da centrare, è aggiungere del codice visibile a sole quelle versioni del browser. Esempio:

<div style="width:600px;height:300px; display:table;border:1px solid #fcf;margin:0 auto; padding:10px">
  
	<div style="display: table-cell; vertical-align:middle; text-align:center">
    <div style="height:100px; border:1px solid #fcf;">bla bla</div>
  </div>
	 
</div>

altrimenti bisognerà inserire un css per ie7 (e 6).

Esistono anche altre tecniche per centrare verticalmente, se ne è parlato in varie discussioni e con una ricerca nel forum potrai trovarle

[amamax]

Ciao. Non c'è un modo per centrarli verticalmente che vada bene universalmente anche con le versioni vecchie?

[Prill]

Se conosci l'altezza dell'uno e dell'altro div basterebbe impostare i margini sul div interno oppure un padding sul div esterno. Altro modo per centrare, anche in questo caso serve conoscere le dimensioni, è usare il position:absolute sul div da centrare oltre a un top e left pari al 50% e margini superiore e sinistro negativi pari a metà delle dimensioni del div. Altra tecnica, non conoscendo le dimensioni, è di inserire un div vuoto flottante prima del div da centrare. Mi pare che a questa pagina siano illustrate tutte e tre le tecniche http://www.pmob.co.uk/pob/hoz-vert-center.htm (guarda i link nel testo)

[amamax]

Originariamente inviato da Prill
Se conosci l'altezza dell'uno e dell'altro div basterebbe impostare i margini sul div interno oppure un padding sul div esterno. Altro modo per centrare, anche in questo caso serve conoscere le dimensioni, è usare il position:absolute sul div da centrare oltre a un top e left pari al 50% e margini superiore e sinistro negativi pari a metà delle dimensioni del div. Altra tecnica, non conoscendo le dimensioni, è di inserire un div vuoto flottante prima del div da centrare. Mi pare che a questa pagina siano illustrate tutte e tre le tecniche http://www.pmob.co.uk/pob/hoz-vert-center.htm (guarda i link nel testo)

Proverò tutto quello che mi hai consigliato. Se torno a scrivere spero che sia solo per ringraziarti

[amamax]

A me serve proprio quello dove NON conosci le dimensioni del div contenuto. Dicevi di mettere un div fluttuante prima di quello da centrare. Ma non riesco a capire come scriver eil codice. Mi puoi fare un esempio? Ti ringrazio infinitamente

[Prill]

In realtà, ricontrollando, centrare col div flottante richiede di conoscere le altezze dei due blocchi. Non è necessario invece col display:table. Non è supportato da vecchie versioni di Explorer (parliamo di browser di molti anni fa) ma nella pagina che ti ho lincato trovi il css dedicato a ie, ed è una soluzione che uso e funziona perfettamente.
Una soluzione universale e unica puoi averla con javascript, facendo calcolare l'altezza dei due contenitori e assegnando un margine superiore che sia pari alla differenza delle due altezze diviso 2. Credo si trovino già pronti script del genere, ma è questione che esula dal forum css