jquery ui-icon and text alignment

I am trying to align jquery ui-icons with text like following, but I notice that the icon is always a little bit higher up than the text. Is there a way to align them horizontally, perfectly?

<span><span class="ui-icon ui-icon-bullet开发者_如何学编程"> bullet text </span>

vertical-align: middle is the attribute to align the text to the middle of the cell, however if you're trying to build ordered/unordered lists with a custom icon you may have an easier time with list-style:square inside url("your/image/path.jpg");.

Another alternative would be to set the <span class="ui-icon ui-icon-bullet"> to position: relative and move it around with top:5px or however much you need to center it.

Fiddle http://jsfiddle.net/7vrTn/

move the text to the outer span and use vertical-align on the inner span. The value depends on your font.

<span><span class="ui-icon ui-icon-bullet" style="vertical-align:..."></span> bullet text </span>

vertical-align:middle worked for me for a font size of 12

You might be better off using a button: http://jqueryui.com/demos/button/#icons , but ofcourse that depends on the context.

*-pike