title: How to vertically center images within an LI element?
body: <p>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.</p>
  <p>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.</p>
  <p>Oh and I am using EJS in the code below. Please see the screenshot:</p>
  <p><img src="https://i.imgur.com/uIXuC.jpeg" alt="Screenshot of list" /></p>
  <p>Here is my code:</p>
  <pre><code>&lt;li data-icon=&quot;false&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;img src=&quot;images/img_trans.gif&quot; class='largePlatform platform_&lt;%= releases[i].platform_abbr %&gt;_large' width='30' height='30' style=&quot;position:absolute; top:25%; left:10px&quot;/&gt;
                  &lt;h2 style=&quot;position:absolute; top:25%; left:50px&quot;&gt;&lt;%= releases[i].platform_abbr %&gt;&lt;/h2&gt;
                  
                   &lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; style=&quot;float:right&quot; &gt;
                   
                      &lt;% if (purchaseText != &quot;&quot;) { %&gt;
                   
                          &lt;img src=&quot;images/game_detail/&lt;%= releases[i].purchase_button_icon %&gt;-purchase.png&quot; width=&quot;35&quot; height=&quot;35&quot; onclick=&quot;window.open('&lt;%= releases[i].purchase_button_url %&gt;');&quot; alt=&quot;&lt;%= purchaseText %&gt;&quot; style=&quot;position:relative; top:10px;&quot;/&gt;
                      
                      &lt;% } %&gt;
                      
                      &lt;div data-role=&quot;button&quot; data-icon=&quot;reminder&quot; data-theme=&quot;&lt;%= buttonTheme %&gt;&quot; onclick=&quot;&lt;%= buttonAction %&gt;(&lt;%= releases[i].id %&gt;)&quot;&gt;
                     &lt;%= buttonText %&gt;
                 &lt;/div&gt;
                  &lt;/div&gt;
                      
              &lt;/a&gt;
          &lt;/li&gt;
  </code></pre>