如何在LI元素中垂直居中图像？

Question

我正在使用jQuery mobile,并试图将一些图像图标集中在一个列表中.我遇到的问题是图像不是在列表项中垂直居中.

有人可以指出我正确的方向,因为到目前为止我还不是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-horizo​​ntal-an-image/