allineamento testo vericale

[ramon32]

scusate se probabilmente a questa domanda ci sarà già una risposta ma non riesco proprio a trovarla quella che fa per me. eppure dovrebbe essere una cosa abbastanza semplice:
ho un div #menu con dentro un div #celle dentro quest'ultimo c'è del semplice testo. non riesco ad allinearlo verticalmente in basso o al centro. ho provato vertical-align ma non mi cambia nulla. è possibile? grazie e scusate se è una ripetizione

[Raccoon29]

Ciao,

purtroppo il "vertical-align" non funziona per i div, ma solo nelle tabelle.
E' un problema riscontrato da tutti prima o poi. Là fuori ci sono vagonate di esempi per cercare di raggirare il problema, ma sempre con una serie di stratagemmi.
Quello che ti posso suggerire è di utilizzare il "padding-top" per cercare di centrare il testo manualmente. Un "padding-top" del 30% o 40% dovrebbe andare, però chiaramente non è più affidabile se il testo in questione è variabile o se si sviluppa su più righe.
Ah poi in giro c'è chi si è avventurato nel cambiare il "display" dei div, portandoli a "table-cell" per emulare il render della tabella nel div e far funzionare così il "vertical-align", ma sono più i browser in cui non funziona che quelli che sì, eppoi personalmente mi pare tanto una porcata...

Se ti servono ulteriori dritte diccelo che nel caso proviamo ad inventarci qualcosa da mostrarti.
HTH
ciauz

[ramon32]

qui siete proprio bravi... ma prima o poi mi ci avvicino al vostro livello... questa però è una soluzione che non va bene. mi salta tutto. le mie celle sono distanziate da un margin-bottom grande quanto se stesse. se metto padding-top; 30% o anche altre percentuali mi salta dutto. il testo mi precipita enormemente. potrei inserire una super mini cella piccolissima dentro le celle però credol'altezza sia sconsigliata, però in fin dei conti è un prezzo accettabile no?

[ramon32]

beh lo ho appena provato e funziona benissimo. è una buona idea per risolvere questa situazione o ci sono soluzioni meno macchinose e piu belle?

[Raccoon29]

uhm, sinceramente non ho ben capito come hai utilizzato la nanocella, però probabilmente col "padding-top" salta tutto perché modifica la dimensione del blocco e lo rende incompatibile col layout.
Generalmente, ti dico, si usa la tecnica del "padding-top" per centrare verticalmente in un div... prova a fare una cosuccia:
se le celle hanno altezza fissa, prova, conoscendo l'altezza totale, a dividerla tra height e padding-top, cioé:

#celle{ /* NB: se le celle sono tante ti conviene usare un class */
   /* height: 100px; un'altezza come questa diventerebbe... */
   height: 60px;
   padding-top: 40px;
}

è un'ipotesi.
Ti dico di fare così perché il padding va a modificare la dimensione del blocco ( in tutti i browser ma non in IE, il quale, a causa del bug del box-model, include di solito il padding nell'height, cioé diverrebbe:

/* solo per IE */
#celle{
   height: 100px;
   padding-top: 40px;
}

e chiudo la parentesi )

HTH
ciauz

[ramon32]

<div id="menu">
<div id="celle"><div id="cuscinetto"></div>
qui c'è del testo</div>
<div id="celle"><div id="cuscinetto"></div>
qui c'è del testo</div>
<div id="celle"><div id="cuscinetto"></div>
qui c'è del testo</div>
<div id="celle"><div id="cuscinetto"></div>
qui c'è del testo</div>
</div>

dove il cuscinetto ha solo una caretteristica, height: 16px;
questo è quello che ho provato a fare. e mi funziona con ie e firefox, altri non li ho provati. anche con risoluzione schermo diverse.

[Raccoon29]

Sì, sì, anche così funziona, solo che questo è il motivo per cui esiste il padding, tutto qui