Come centrare verticalmente le immagini all'interno di un elemento LI?

Question

Sto usando jQuery mobile e sto cercando di centrare alcune icone di immagine in un elenco. Il problema che sto avendo è che le immagini non sono centrate verticalmente all'interno di una voce di elenco.

Qualcuno può gentilmente indicarmi la giusta direzione perché non sono un esperto CSS di gran lunga. So che posso farli usare i tavoli ma non voglio farlo. Grazie.

Oh e sto usando EJS nel seguente codice m. Prega di consultare il colpo di schermo:

http://imgur.com/uIXu C

Ecco il mio codice:

<li data-icon="false"> 
      <a href="#"> 
       <img src="images/img_trans.gif" class='largePlatform platform_<%= releases[i].platform_abbr %>_large' width='30' height='30' style="position:absolute; top:25%; left:10px"/> 
       <h2 style="position:absolute; top:25%; left:50px"><%= releases[i].platform_abbr %></h2> 

       <div data-role="controlgroup" data-type="horizontal" style="float:right" > 

        <% if (purchaseText != "") { %> 

         <img src="images/game_detail/<%= releases[i].purchase_button_icon %>-purchase.png" width="35" height="35" onclick="window.open('<%= releases[i].purchase_button_url %>');" alt="<%= purchaseText %>" style="position:relative; top:10px;"/> 

        <% } %> 

        <div data-role="button" data-icon="reminder" data-theme="<%= buttonTheme %>" onclick="<%= buttonAction %>(<%= releases[i].id %>)"> 
        <%= buttonText %> 
       </div> 
       </div> 

      </a> 
     </li> 

Answer 1

diretta Esempio:

http://jsfiddle.net/B6Z9N/

HTML

<li> 
    <img src="http://dummyimage.com/20x20/000/000000.png" /> 
</li>​ 

CSS

li { 
    border: 1px dotted black; /* Just to illustrate height */ 

    height: 100px; 
    line-height: 100px; 
    vertical-align: middle; 
}​ 

trovato questo articolo: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

Basta applicare margine sul img.

<li> 
    <img class="image-style" src="https://dummyimage.com/20x20/000/111fed" /> 
</li> 

.image-style { 
    margin : 10px -10px; 

} 

li { 
    border : 1px solid black 
} 

JSFiddle

Answer 3

So di essere in ritardo alla festa, ma io uso sempre questo e ho pensato che qualcuno potrebbe trovare utile ..

HTML ..

<ul> 
    <li class="logo_bar"><img src="img/1" /></li> 
    <li class="logo_bar"><img src="img/2" /></li> 
    <li class="logo_bar"><img src="img/3" /></li> 
    <li class="logo_bar"><img src="img/4" /></li> 
    <li class="logo_bar"><img src="img/5"/></li> 
</ul> 

CSS ...

.logo_bar { 
    display: inline-block; 
    vertical-align: middle; 
}