vertical-align in una lista con heigth fissa.

[Mel.82]

Ho un problema: ho una lista così:
http://melscauldron.altervista.org/lista.htm

E devo allineare al centro verticalmente il testo. Come posso fare??

La lista è fatta così: (notare che l'immagine fa parte del link)

<div id="lista">
  <ul>[*]
      [img]kubrickbgcolor.jpg[/img] Text1 
    [*]
      [img]kubrickbgcolor.jpg[/img] Text2 
    [*]
      [img]kubrickbgcolor.jpg[/img] Text3 long enought to wrap
    [/list]
</div>

E questo è il foglio di stile che sto usando:

#lista {
  background-color: #003600;
  border: 3px dashed #555555;
  width: 190px;
  margin: 5px;
  padding: 5px;
  text-align: center;
}
#lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
  
#lista li {
  display: block;
  margin-top: 3px;
  margin-bottom: 3px;

}

#lista li a {
  padding: 3px;
  height: 45px;
  display: block;
  background-color: #505050;
  color: #fff;
  text-decoration: none;
  border: 1px dotted #fff;
  font-weight: bold;
}

#lista li a:hover {
  background-color: #606060;
  background-image: none;
  color: #990033;
}

#lista img {
  border: 0;
  height: 45px;
  width: 45px;
  float: left;
  margin-right: 5px;
  vertical-align: middle;
}

[Mich_]

#lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
}
  
#lista li {
  display: block;
  margin-top: 3px;
  margin-bottom: 3px;
  width: 100%;
}

#lista li a {
  padding: 3px;
  height: 45px;
  display: block;
  background-color: #505050;
  color: #fff;
  text-decoration: none;
  border: 1px dotted #fff;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

Inoltre credo ti convenga aggiungere:

#lista a:hover img {
  border: 0;
}

in modo da impedire il bordo anche in quei browser che lo mettono solo all':hover.

[Mel.82]

Grazie per la dritta sul img a:hover.
Ma con il resto del codice da te suggerito, non risolvo l'allineamento verticale del testo.

[Mich_]

Opps ti ho dato il codice per allineare orizzontalmente.

Per centrare in veritcale la cosa e` piu` complessa.
Pero` puoi centrare il blocco <a> (dato che tu lo uso come blocco) all'interno del blocco[*].
La cosa e` semplice se il link non va su due righe: in tal caso ti basta un line-height.

Oppure si puo` fare facilmente se conosci l'altezza dei blocchi in questione (anche espressa in em): in tal caso giochi con i margini di <a> rispetto al[*]

Altro caso noto e` se i blocchi sono posizionati (cioe` hanno position absolute o relative).

Altrimenti non saprei come fare.

[Mel.82]

Eh il problema è che ne ho diversi che vanno su 2 righe..
Nella lista in questione sono titoli di film con annessa icona, ce ne sono anche che arrivano a 3 righe..

[Mich_]

Ho l'impressione che ci sia un errore nella marcatura.

Come hai fatto tu l'immagine e` sulla stessa riga del testo, mentre dall'ultimo intervento mi pare di capire che il testo deve stare a destra dell'immagine.
Ad esempio:

<ul>[*]
    <img ...>
    

testo...</p>
  
........

Forse sarebbe piu` adatta una lista di definizione:

<dl>
  <dt><img ...></dt>
  <dd>testo...</dd>
  <dt><img ...></dt>
  <dd>testo...</dd>
....
</dl>

Con il CSS:

dt {
  height: 10em;   /* o altro valore */
  width: 100px;
  float: left;
}
dd {
  height: 10em;   /* uguale al dt */
  margin: ...;
  padding: ...;
}