Allineamento Verticale immagine e testo

[rotteninside]

Ciao a tutti, vorrei allineare verticalmente un'immagine e link, all'interno di ul LI
Il risultato dovrebbe essere come lo stesso di quando si usavano le tabelle e il valign=middle.
Ora, ho provato a inserire nel LI il vertical-align ma non sortisce l'effetto che mi aspettavo.
Posto il codice html e il css, magari qualcuno sa dirmi dove sta l'errore...

HTML :

<div id="corpodx2">
   <h3>Titolo Documento</h3>
      <div>
         <ul>[*][img]/tplimage/stampa_doc.gif[/img]Stampa documento[*][img]doc.gif[/img]Scarica il testo[/list]		
      </div>
</div>

CSS :

#corpodx2 
{
	width:200px;
	float:right;
	font-family:verdana, arial, sans-serif;
	font-size: 10px;
	margin:0;
	padding:0;	
}

#corpodx2 div{
/*		width:410;*/
		border:solid 1px #EEEEEE;
		padding:5px 5px 5px 5px;
		background:#F7F7F7;
		margin-bottom:10px;
}

#corpodx2 ul{
	list-style-type:none;
	margin: 0;
	padding: 0;
}

#corpodx2 li{
	list-style-type:none;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color:#012a6a;
	border:solid 1px;
	height:20px;
        vertical-align:middle;
}
#corpodx2 img{
	border: 0px;
	/*float:left;
	display:inline;*/
}

[thomas_anderson]

Ciao!
Il 'vertical-align' si applica solo:

1) alle celle di tabella;
(vedi http://www.w3.org/TR/REC-CSS2/tables.html ) ecco spiegata la facilità del layout con le tabelle: le tabelle hanno un impostazione di default diversa dai div: 'display: table' vs
'display: block';
2) agli elementi in riga in un box di riga;
(vedi http://www.w3.org/TR/REC-CSS2/visuren.html e http://www.w3.org/TR/REC-CSS2/visudet.html e quindi http://www.w3.org/TR/REC-CSS2/text.html )

le immagini sono elementi rimpiazzati. tradizionalmente i browser interpretano in due maniere:

1) con 'display: inline' (FF, IE)
2) con 'display: inline-block' (Opera)
[*] è un elemento di blocco, quindi tale proprietà non si applica. potresti applicare tale proprietà all'immagine. in questo modo il testo dovrebbe allinearsi. altrimenti potresti usare la 'line-height'
applicata a[*] fino a raggiungere un risultato accettabile. ovviamente dovresti dare un'altezza a[*] pari all'altezza dell'immagine.

[rotteninside]

Originariamente inviato da thomas_anderson
[*] è un elemento di blocco, quindi tale proprietà non si applica. potresti applicare tale proprietà all'immagine. in questo modo il testo dovrebbe allinearsi. altrimenti potresti usare la 'line-height'
applicata a[*] fino a raggiungere un risultato accettabile. ovviamente dovresti dare un'altezza a[*] pari all'altezza dell'immagine.

Scusa la domanda, ma quale proprietà?
VVoVe:

[thomas_anderson]

vertical-align

sintassi: vertical-align: <valore>

<valore>

* baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentuale>

Esempio:

img { vertical-align: top }
.apice { vertical-align: super }
.pedice { vertical-align: sub }

La proprietà vertical-align permette modificare il posizionamento verticale degli elementi inline. Le percentuali si riferiscono all'interlinea. La proprietà vertical-align è utilie per gestire l'allineamento delle immagini come pure per creare apici ovvero pedici.

ps. i post si leggono dall'inizio alla fine. e con attenzione.

[rotteninside]

Ok funziona!!! Grazie