How to make thumb in li to be aligned in center

[rkononov]

Hello i've added thumbs into li and found that they aligned at top right corner (if resolution >960px)

Any idea how i could make them aligned to center on high resolution(when list became buttons as in attach) and work as is on smaller resolution (simple list)

sample code:

<div data-role="page" class="my-page" data-theme="b" id="main_page">
  <div data-role="header">
    <h1 style="display: none"><%= t('views.mobile.index.caption') %></h1>
    <label for="searchbar" class="ui-hidden-accessible"><%= t('views.mobile.index.caption') %></label>
    <input type="search" name="searchbar" id="search_input" placeholder="<%= t('views.mobile.index.caption') %>" value="" data-mini="true" />
  </div>
  <div role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">
      <li><a href="#filter_page">
        <!--<img src="/assets/notebook-icon.png" class="ui-li-thumb">-->
        <img src="/assets/80/shop-80.png" class="ui-li-thumb">
        <h2><%= t('views.mobile.index.firms') %></h2>
      </a></li>
      <li><a href="#map_page">
        <!--<img src="/assets/globe-icon.png" class="ui-li-thumb"> -->
        <img src="/assets/80/map-80.png" class="ui-li-thumb">
        <h2><%= t('views.mobile.index.map') %></h2>
      </a></li>
      <li><a href="#routing_page">
        <!--<img src="/assets/routing-icon.png" class="ui-li-thumb"> -->
        <img src="/assets/80/waypoint-map-80.png" class="ui-li-thumb">
        <h2><%= t('views.mobile.index.routing') %></h2>
      </a></li>
      <li><a href="#" id="favorite_link">
        <!--<img src="/assets/star-icon.png" class="ui-li-thumb"> -->
        <img src="/assets/80/like-80.png" class="ui-li-thumb">
        <h2><%= t('views.mobile.index.bookmark') %></h2>
      </a></li>
    </ul>
  </div>
</div>