Placing an image in a jQuery tab?

Is there a correct way to place an image next to an a ta开发者_如何学运维g in a li used as a jQuery tab?

<div id="tabs">
  <ul>
     <li><a href="#">Text</a>{I want the image here}</li>
  </ul>
</div>

Using a div with the image as a background using inline-block works, but I've read that inline-block should be avoided.

<div style="display:inline" class="ui-icon ui-icon-refresh">

Is there a better way?

Can you not just use a vertically aligned image?

<img src="image.jpg" style="vertical-align: middle" />

This solution is working great for me:

Tab HTML Code:

<div id="tabs">
     <ul>
    <li><a href="link1.php"><img src="image1.png" border="0">menu item 1</a></li>
    <li><a href="link2.php"><img src="image2.png" border="0">menu item 2</a></li>
    <li><a href="link3.php"><img src="image3.png" border="0">menu item 3</a></li>
    <li><a href="link4.php"><img src="image4.png" border="0">menu item 4</a></li>
     </ul>
</div>

And the CSS

#tabs ul li img, #second ul li img {
vertical-align: middle;
margin-right: 8px;
}