jquery ui-图标和文本对齐

Question

我正在尝试将jquery ui-icons与下面的文本对齐，但我注意到图标总是比文本高出一点点。有没有办法将它们水平对齐？

<span><span class="ui-icon ui-icon-bullet"> bullet text </span> 

Answer 1

vertical-align: middle是对齐文本到单元中间的属性，但是如果你想打造排序，自定义图标/无序列表，你可以有一个更容易的时间与list-style:square inside url("your/image/path.jpg");。

另一种替代方法是将<span class="ui-icon ui-icon-bullet">设置为position: relative，然后将其移动到top:5px或无论您需要居中多大。

小提琴http://jsfiddle.net/7vrTn/

Answer 2

动议文本到外跨度并使用垂直对齐于内跨度。该值取决于您的字体。

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

vertical-align:middle为我工作12

Answer 3

的字体大小你可能会用一个按钮更好：http://jqueryui.com/demos/button/#icons，但ofcourse依赖于上下文。

* -pike