Поместить изображение на вкладку jQuery?

Question

Есть ли правильный способ поместить изображение рядом с тегом a в li , используемом в качестве вкладки jQuery?

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

Использование div с изображением в качестве фона с использованием inline-block работает, но я читал, что inline-block следует избегать.

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

Есть ли лучший способ?

Answer 1

Разве вы не можете просто использовать вертикально выровненное изображение?

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

Answer 2

Это решение отлично работает для меня:

Вкладка HTML-код:

<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>

И CSS

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