[CSS] Vertical Align (Non si allinea verticalmente)

[Giacomo Torricelli]

Ciao a tutti,
ho questa div, imposto lo span con il numero con vertical-align:bottom, ma il numero non si mette in fondo, non cambia proprio la sua posizione... Come mai?

<div style="background-image:url(puls.rosa.jpg); background-repeat:no-repeat; width:100px; height:75px; text-align:center;">
	<div style="vertical-align:-20px; width:80px; margin-left:10px"> 
    	<span style="font-weight:bold">POST</span><br>

		<span style="vertical-align:bottom; font-size:30px;">10</span>
    </div>
</div>

 

[borgo italia]

ciao
dai un occhio qui
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

 

[Giacomo Torricelli]

ciao
dai un occhio qui
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

Mmm beh ok, ma quello che volevo fare io quindi non è possibile? Non ho capito bene...

 

[borgo italia]

ciao
mi spiace, ma sembrerebbe di no.
ho fatto alcune prove, ma senza il risultato che vuoi

 

[Jonn]

<div style="position: relative; background-image:url(puls.rosa.jpg); background-repeat: no-repeat; width: 100px; height: 75px; text-align: center; background-color: #FF0000;">
	<div style="width:100px;">
	<span style="font-weight: bold;">POST</span>
	<span style="position: absolute; display: block; width: 100%; bottom: 0; font-size: 30px;">10</span>
	</div>
</div>

Il vertical-align serve solo per allineare elementi in base al testo; non il testo stesso.

 

[Giacomo Torricelli]

<div style="position: relative; background-image:url(puls.rosa.jpg); background-repeat: no-repeat; width: 100px; height: 75px; text-align: center; background-color: #FF0000;">
	<div style="width:100px;">
	<span style="font-weight: bold;">POST</span>
	<span style="position: absolute; display: block; width: 100%; bottom: 0; font-size: 30px;">10</span>
	</div>
</div>

Il vertical-align serve solo per allineare elementi in base al testo; non il testo stesso.

Ah, grazie mille...
Quindi mi consigli di fare una tabella con un height definito da me? Mi sembra l'unica soluzione per posizionare il testo in basso...

 

[Jonn]

Se usi una tabella puoi fare così:

<table style="width:100px; text-align:center;">
	<tr><td style="background:#FF0000;">Post</td></tr>
	<tr><td style="background:#00FF00;">testo</td></tr>
	<tr><td style="background:#0000FF;">10</td></tr>
</table>

Sarebbe meglio perchè anche se le tabelle è meglio usarle per dati tabellari (per esempio listini prezzi, piatti del menu per siti di ristoranti, elenco prodotti per negozi, orari di apertura e chiusura settimanali...) in questo caso è meglio per il semplice fatto che il selettore position bisogna saperlo usare altrimenti potrebbe sfasarti parte del template.
Non che sia una soluzione inutile, è solo che dopo per ogni div bisogna assegnare il selettore position con il valore appropriato (e credo addirittura che vada messo in tutte le div della struttura).
Per farla breve?.......usa questa tabellina 1x3! XD
Ciao