LI要素内の画像を垂直に配置する方法は？

Question

jQueryモバイルを使用していて、リスト内に画像アイコンの一部を配置しようとしています。私が抱えている問題は、イメージがリストアイテム内で垂直方向にセンタリングされていないことです。

私はCSSの専門家ではないので、親切に私を正しい方向に向けることができます。私はテーブルを使ってそれらを得ることができますが、私はそれをしたくありません。ありがとう。

ああ、私は以下のmコードでEJSを使用しています。

http://imgur.com/uIXu C

ここに私のコードです：

<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

ライブ例：

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; 
}​ 

：http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

ちょうど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

私は

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; 
}