Allinea verticalmente il contenuto negli elementi dell'elenco di blocchi in linea

Question

Sto provando a visualizzare un elenco non ordinato in senso orizzontale. In ogni elemento della lista, ho un tag di ancoraggio con un'immagine, che mi piacerebbe mostrare allineato verticalmente nella voce dell'elenco. Ecco il mio

HTML:

<ul> 
    <li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
</ul> 

CSS:

ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 93px; 
} 

ul li 
{ 
    display: inline-block; 
    width: 110px; 
    height: 93px; 
    text-align: center; 
    vertical-align: middle; 
} 

Che cosa sto facendo male qui?

Answer 1

http://jsfiddle.net/zgxHB/1/

Prova utilizzando display: table-cell; anziché display: inline-block;

Answer 2

Prova a flottare a sinistra. Questo li visualizza in una linea orizzontale e mantenere il loro stato di blocco

Answer 3

display: inline-block; tratta l'elemento come se fosse livello in linea, il che significa che qualsiasi spazio bianco nel tuo markup viene visualizzato quando viene eseguito il rendering della pagina.

TRY:

<ul><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
</li></ul> 

O:

<ul><!-- 
    --><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
--></ul>