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