How to vertically center images within an LI element? - html

Question

I am using jQuery mobile and I am trying to center some image icons within a list. The problem I am having is that the images are not vertically centered within a list item.
Can someone kindly point me in the right direction since I am not a CSS expert by far. I know I can get them using tables but I do not want to do that. Thanks.
Oh and I am using EJS in the code below. Please see the screenshot:
Here is my code:
<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

Live Example:
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;
}​
Found this article: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

I know I'm late to the party but I always use this and thought someone might find it useful.
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;
}

Answer 3

Just apply margin on 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