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