圖標不與按鈕內的文本對齊

Question

我有一個按鈕元素，裏面有一個跨度，用於在按鈕內顯示圖標。但他們並不一致。我提到了許多論壇帖子，他們建議中間對齊 - 但這不能解決問題。任何其他方式來解決這個問題？

小提琴

http://jsfiddle.net/Vw9Z6/432/

HTM代碼

<button class="ui-button ui-widget ui-state-default app-custom-button-request"><span class="ui-button-icon-primary ui-icon ui-icon-star app-span"></span>Request</button> 

CSS

.app-custom-button-request 
{ 
    color:red; 
    margin-left:10px; 
    display: inline-block; 
    vertical-align: middle; 
    width:200px; 
} 

截圖

Answer 1

這修復它：

.ui-icon {display: inline-block;} 

的.ui-icon設置爲block顯示。

預覽

小提琴：http://jsfiddle.net/5c5zc72d/