Centering data-icon in button

Centering data-icon in button

So I created my own list items with two split buttons with the following code:

  2. <ul data-role="listview" style="padding:0; margin: 0;">
  3.   <div data-role="controlgroup" data-type="horizontal" style="padding:0; margin: 0;">
  4.     <div style="margin-right: 84px;">
  5.       <a href="index.html" class="ui-corner-tl-only" data-role="button" data-icon="arrow-r"
  6.         data-iconpos="right" style="width: 100%">Search #1</a>
  7.     </div>
  8.     <a href="index.html" class="ui-corner-none" data-role="button" data-icon="gear"
  9.       data-iconpos="notext" style="width: 40px">Edit</a>
  10.     <a href="index.html" class="ui-corner-tr-only" data-role="button" data-icon="delete"
  11.       data-iconpos="notext" style="width: 40px">Delete</a>
  12.   </div>
  13.   <div data-role="controlgroup" data-type="horizontal" style="padding:0; margin: 0;">
  14.     <div style="margin-right: 84px;">
  15.       <a href="index.html" class="ui-corner-bl-only" data-role="button" data-icon="arrow-r"
  16.         data-iconpos="right" style="width: 100%">Saved Search #2</a>
  17.     </div>
  18.     <a href="index.html" class="ui-corner-none" data-role="button" data-icon="gear"
  19.       data-iconpos="notext" style="width: 40px">Down</a>
  20.     <a href="index.html" class="ui-corner-br-only" data-role="button" data-icon="delete"
  21.       data-iconpos="notext" style="width: 40px">Delete</a>
  22.   </div>
  23. </ul>

Here is what this looks like:


Now, my question is how do I center the the delete and gear data-icons using css?

Thanks in advance for any help!