How to center list menu item without text adding an extra line

I've been trying to figure this out for a while but I can't seem to get it to work. All I want is to add text in the middle of the list item (see code) however it creates an extra line and makes the row bigger. I tried using the tag but it doesn't work. How can I add the text to be centered without changing the row size?

 <html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
       <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head> 
    <style>
       .ui-icon-myicon:after {
          background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
       }
       .ui-icon-myicon2:after {
          background-image: url("http://forum.librecad.org/images/gear.png");    
       }
       .inlineIcon {
         display: inline-block;
         position: relative;
         vertical-align: middle;
         margin-right: 6px;
       }
    </style>

    <div data-role="page" id="page1">
       <div data-role="header"  data-position="fixed" data-tap-toggle="false">
           <h1>My page</h1> 
       </div>   
       <div role="main" class="ui-content">
           <ul data-role="listview" data-inset="true" >
               <li data-icon="myicon"><a href="#"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</a></li>
           </ul>
       </div> 
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">
          <h1>My page footer</h1>
       </div> 
   </div>
 </html>

Solution

Use text-align: center to center align the text.
Set the extra icon to display: block and use the ui-btn-icon-left class to align left.

li.x-center > a.ui-btn {
    text-align: center;
}
li.x-center > a > span {
    display: block;
}

<ul data-role="listview" data-inset="true">
    <li data-icon="myicon" class="x-center">
        <a href="#"><span class="ui-btn-icon-left ui-icon-myicon2"></span>Center this text</a>
    </li>
</ul>

Fiddle